Search code examples
javascriptjsonvue.jsvue-clivue-loader

How to add src path into vue component from json file


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"
        }
    ]

Solution

  • You must add require

    <img :src="require(item.src)">