1

我陷入了使用 Laravel 和 Vue 的电子商务开发项目中。我无法让图像在产品的索引视图中动态显示。我可以在显示视图中上传和打印图像，这些图像存储在存储/应用程序/图像中。

问题是产品的 image_url 属性是可以为空的，因此它可能有也可能没有图像，并且想法是在有图像时显示它们。

这是我开发代码本身的组件 ProductCardComponete.vue 的代码。

<template lang="html">
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="card">
            <header class="bg-dark padding">
            </header>

            <div class="justify-content-center">

                    <!-- <img v-for="product in products" v- if="product.extension" :src="'/productos/images/'+product.id+product.extension"> 
-->
                <img :src="'/productos/images/34.jpeg'" class="card-img-top">

        </div>
        <div class="card-body padding">
            <h2 class="card-title">
                <a :href="'/productos/'+product.id">
                    {{product.title}}
                </a>
            </h2>
            <h4 class="card-subtitle">{{product.humanPrice}}</h4>
            <p class="card-text">{{product.description}}</p>
        </div>
    </div>
</div>
</template>

<script>
    export default {
        props:{
            product: {
                type: Object
            }
        }
    }
</script>

当然，当我以静态方式放置路线时，它可以工作。但是我不知道如何找到动态显示它的解决方案以及如果产品有图像显示的方式。

这是一个静态路由

最后，这里是项目的 github Repo 的链接，以防万一。 Github 回购

4

1 回答 1

0

图像应保存在storage/app/public/其中，您应该创建一个符号链接，以便您可以访问storage文件夹中的public文件夹。否则，您将无法访问图像。阅读这个官方文档。

于 2018-08-27T11:47:00.020 回答