Сразу извиняюсь что пложу вопросы:)Храню в бд путь к картинке что на сервере,вывожду этот путь в <img v-bind:src="srcToProdImage" alt="">
Вот пример пути http://localhost:8081/uploads/1528909933677-layer-2.8d64e52.png
Получаю вот такую ошибку:
Но если просто перейти по ссылке то работает!
И у меня возникает вопрос "Как так то а?".
Код Продукт
<template>
<div class="main">
<img v-bind:src="srcToProdImage" alt="">
<p class="name">{{ name }}</p>
<p class="price"><span>{{ price }}</span><span></span></p>
</div>
</template>
<style lang="scss" scoped>
.main{
img{
width: 240px;
}
}
.name{
text-transform: uppercase;
color: #222222;
font-family: 'Lato', sans-serif;
font-weight: 600;
margin-top: 15px;
margin-bottom: 15px;
font-size: 13px;
}
.price{
span:first-child{
color: #f16d7f;
font-family: 'Lato', sans-serif;
font-weight: 800;
}
}
</style>
<script>
export default {
props:["name","price","srcToProdImage"],
}
</script>
Компонент в котором выводятся продукты
<template>
<div class="main">
<p class="title"><span>Fetured Items</span><br>
<span>Shop for items based on what we featured in this week</span></p>
<div v-if="products && products.length" class="content">
<content-item v-for="product in products" :key="product.id"
v-bind:name="product.name"
v-bind:price="product.price"
v-bind:srcToProdImage = "'localhost:8081/' + product.productImage" ></content-item>
</div>
<p class="cont-btn">
<button class="btn">Browse All Product <span><i class="fas fa-arrow-right"></i></span></button>
</p>
</div>
</template>
<script>
import Content_item from './Content-item';
import axios from 'axios';
export default {
data: function(){
return{
products:[],
errors:[]
}
},
created(){
axios.get('http://localhost:8081/products')
.then((result) => {
console.log(result)
this.products = result.data.products
}).catch((err) => {
this.errors.push(err)
});
},
components: {
'content-item' : Content_item
}
}
</script>
<style lang="scss" scoped>
.content{
display: flex;
flex-wrap: wrap;
margin-left: 150px;
margin-right: 150px;
justify-content: space-between;
}
.title{
text-align: center;
margin-top: 40px;
margin-bottom: 30px;
span:first-child{
font-family: 'Lato', sans-serif;
font-weight: 800;
color: #222222;
font-size: 30px;
}
span:last-child{
font-family: 'Lato', sans-serif;
font-weight: 400;
color: #9f9f9f;
font-size: 14px;
}
}
.cont-btn{
display: flex;
justify-content: center;
}
.btn{
padding: 18px 24px 18px 24px;
background-color: #f16d7f;
font-family: 'Lato', sans-serif;
font-weight: 800;
border: none;
outline: none;
color: #ffffff;
}
</style>