Я застреваю в проекте по развитию электронной коммерции с использованием Laravel и Vue.Я не могу заставить изображения динамически отображаться в индексном представлении продукта.Я могу загружать и распечатывать изображения в виде представления, и они хранятся в хранилище / app / images.
Проблема в том, что атрибут image_url продукта может иметь значение null, поэтому он может иметь или не иметьизображение и идея состоит в том, чтобы показать их, когда они есть.
Вот код компонента 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 репо проекта на всякий случай. Github Repo