图像在 vue 组件中有效，在另一个组件中无效

Question

所以我在刀片文件中有一个 vue 组件（我正在使用 laravel），该组件显示所有带有 v-for 的图像，使用 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