How to add src path into vue component from json file

Question

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

Are all the image paths starting with ../assets/img?

Phil
– Phil

2020-09-04 03:55:02 +00:00
Commented Sep 4, 2020 at 3:55 — Phil
– Phil, Commented Sep 4, 2020 at 3:55

Phil · Accepted Answer · 2020-09-04 04:07:49Z

2

You need to keep using require() in order to let Webpack know to include your images when bundling.

Because Webpack bundles at compile time and your images are only known at runtime, this is best done by keeping part of the path static so Webpack can optimistically include the right files.

For example, if all your images are under ../assets/img, the best option would look like this

async mounted () {
  const pathRegex = /^\.\.\/assets\/img\//
  const { data } = await axios.get("./test.json")
  this.items = data.map(item => ({
    ...item,
    src: require(`../assets/img/${item.src.replace(pathRegex, "")}`)
  }))
}

Webpack will then bundle every file under ../assets/img and at runtime, will be able to resolve the paths you supply.

See https://webpack.js.org/guides/dependency-management/#require-with-expression

edited Sep 4, 2020 at 4:07

answered Sep 4, 2020 at 4:02

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

NwaiwuIsidore Over a year ago

I am getting this error: Cannot read property 'replace' of undefined

Phil Over a year ago

@NwaiwuIsidore it's not possible to debug that issue from a single comment. I suggest you post a new question

NwaiwuIsidore Over a year ago

I found a way by using map(). I will post it as a possible answer.

haihv · Accepted Answer · 2020-09-04 03:58:22Z

0

You must add require

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

answered Sep 4, 2020 at 3:58

haihv

161 bronze badge

3 Comments

Phil Over a year ago

I don't think this would work. Without knowing anything about where the images are located, Webpack won't be able to bundle them

haihv Over a year ago

In this case, you can put images in the public folder. But you have to make sure that these images don't change often due to caching issues.

Phil Over a year ago

Excellent point but you don't need to use require for things in the public folder

NwaiwuIsidore · Accepted Answer · 2021-06-26 21:09:29Z

This was how I solved it. I kept getting an error when using the regex above to add require to the src attribute in the json. This is what I did instead and it worked for me.

I am using fetch() to read the json which I am watching with json-server. The json is basically an array (cokeImages) of objects when you use res.json() to convert it.

{
  "cokeImages": [
            { 
                "title": "Cocacola Life", 
                "description": "Lorem ipsum no sicut anon in aquila no ager. In homines ad majorem tempus avis, et cum in pecunia imoten tua",
                "src": "../assets/cocacola-cans/cocacola-life.png", 
                "id": 1, 
                "name": "cocacola-life",
                "nutrition": [
                    { "title": "sodium", "value": "150 cl", "percent": "25%" },
                    { "title": "Total Fats", "value": "0g", "percent" : "0%" },
                    { "title": "sodium (mg)", "value": "40mg", "percent": "0%"},
                    { "title": "potasium", "value": "4g", "percent": "0%" },
                    { "title": "calcium", "value": "0g", "percent": "0%"}
                ]
            },
            { 
                "title": "Cocacola Zero", 
                "description": "Lorem ipsum no sicut anon in aquila no ager. In homines ad majorem tempus avis, et cum in pecunia imoten tua",
                "src": "../assets/cocacola-cans/cocacola-zero.png", 
                "id": 2, 
                "name": "cocacola-zero",
               ... (and so on)...

as you can see, the name property in each object is also the name I used in each images src. It is that name property I used in the map() method to attach require to each src.

mounted(){
      fetch("http://localhost:3000/cokeImages")
      .then(response => response.json())
      .then(arrayOfOjects => {
        console.log(arrayOfObjects)
        this.cokeImages = data.map(eachObject => {
          return {...eachObject, src: require(`../assets/cocacola-cans/${eachObject.name}.png`)}
        })
        console.log(this.cokeImages)
      })
      .catch(err => {
        console.log(err.message)
      })
    }

Collectives™ on Stack Overflow

How to add src path into vue component from json file

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related