How to render images, if i get path from json file. Default i use require('../assets/img/item-image.png')
. But i have no idea, how use it in this case
Component:
<div v-for="(item, index) in items">
<img :src="item.src">
</div>
<script>
import axios from 'axios'
export default {
name: 'componentName',
data () {
return {
items: null
}
},
mounted () {
axios
.get('./test.json')
.then(response => (this.items = response.data))
}
}
</script>
JSON file:
[
{
"id": 1,
"title": "item title",
"src": "../assets/img/item-image.png",
"alt": "item-image",
"text": "item body"
}
]
You must add require
<img :src="require(item.src)">