我不能用laravel和vue js打印图像

Question

我被困在一个使用Laravel和Vue的电子商务开发项目中。我不能让图像动态地出现在产品的索引视图中。我可以上传和打印显示视图中的图像，这些图像存储在storage / app / images中。

问题是，产品的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 Repo

Answer 1

图像应该保存在storage/app/public/中，并且你应该创建一个符号链接，这样你就可以访问public文件夹中的storage文件夹。否则，您将陷入访问图像的困境。阅读此官方doc.