我无法使用laravel和vue js打印图像

Question

我被困在使用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 Repo

Answer 1

图像应保存在storage/app/public/中，并且应进行符号链接，以便可以访问storage文件夹中的public文件夹。否则，您将无法访问图像。阅读此官方doc.