映像在vue组件中工作，而不在其他组件中工作

Question

所以我在刀片文件中有一个vue组件（我使用laravel），该组件显示所有带有v的图像，用于使用axios获取的数据，而第二个组件仅显示一个带有通过道具传递的数据的图像。我的问题是v-img中的src（我也使用vuetify）在第一个组件中工作，但在第二个组件中不工作，即使链接是相同的，并且两个组件都在位于同一文件夹中的刀片文件中调用：显示所有图像刀片文件：

@extends('layouts.app')

@section('content')
<div id="app">
      <show-images></show-images> 
</div>
@endsection

显示图像vue文件：

<template>
    <div class="container">
        <v-layout row wrap>
            <v-flex 
            xs12 sm6 md4 lg3
            v-for="image in images" :key="image.id"
            >
            <a :href="'images/' + image.id">
            <v-card
            shaped
            hover

            class="text-center mx-3 my-3">

            <v-responsive class="pt-4">
                <v-img
                lazy-src="https://via.placeholder.com/300?text=Something+Went+Wrong"
                aspect-ratio="1"
                src="blue-hole.jpg"
                ></v-img>
            </v-responsive>

            <v-card-text>
                <div class="subheading">{{image.title}}</div>
            </v-card-text>

            </v-card>
            </a>
            </v-flex>


        </v-layout>



   <div class="text-center">
    <v-pagination
      v-model="pagination.current"
      :length="pagination.total"
      @input="onPageChange"
      color="white"
      dark
    ></v-pagination>
  </div>
</div>
</template>

<script>
export default {
    data(){
        return{
            images:[],
            pagination: {
                current: 1,
                total: 0
            }
        }
    },
    methods: {
        getImages(){
            axios.get('api/getImages?page=' + this.pagination.current)
            .then(response => {
            this.images = response.data.data;
            this.pagination.current = response.data.current_page;
            this.pagination.total = response.data.last_page;
            });
        },
        onPageChange(){
            this.getImages();
            window.scrollTo(0,0);
        },
        showImage(id){
            console.log(id)
            axios.get('api/showimage/' + id)
        }


    },
    mounted(){
            this.getImages();
            console.log('sup')
    }
}
</script>

显示单个图像刀片文件：

@extends('layouts.app')

@section('content')
<div id="app">
    <show-image :image = '@json($image)'></show-image>
</div>
@endsection

下面是显示图像vue文件：

<template>

    <div>

        <h1 class="subheading gre--text">test</h1>

        <div class="container">
            <div class="row" style="height:100%;border:2px solid blue">
                <div class="col-sm-5" style="border:2px solid red">

                        <v-card flat class="text-center mx-2 my-2">
                            <v-responsive class="pt-4">
                                <v-img
                                lazy-src="https://via.placeholder.com/300?text=Something+Went+Wrong"
                                aspect-ratio="1"
                                src="blue-hole.jpg" 
                                ></v-img>
                            </v-responsive>
                            <v-card-text>
                                <!-- <div class="subheading"> {{image.title}} </div> -->
                                <div class="grey--text"> {{image.file_name}} </div>
                            </v-card-text>
                            <v-card-actions>
                                <v-btn color="grey">
                                    <v-icon left small>mdi-download-outline</v-icon>
                                    <span>Download</span>
                                </v-btn>
                            </v-card-actions>
                        </v-card>

                </div>

            </div>


        </div>




    </div>

</template>


<script>
export default {
    props : [
        'image'
    ],
    data(){
        return{

        }
    },
}
</script>

我甚至尝试使用img标签，认为这是一个vuetify错误，但问题仍然存在。请帮忙。谢谢ps:blue-hole.jpg位于公用文件夹中

Answer 1

在您的代码中，用双引号附上您的@json（Image）指令：

@extends('layouts.app')

@section('content')
<div id="app">
    <show-image :image="{{ json_encode($image) }}"></show-image>
</div>
@endsection