CODEWITHSUNDEEP
htmljsonvuetify.js
M. Straw
M. Straw

Reputation: 502

How can I use a JSON object to an <img> src tag?

I am building a dynamic vuetify nav drawer, and I want to store the images in a JSON array. My question is, how can I (if it's even possible) pull the image attribute into the src of the tag?

I know using the following doesn't work, but what can to pull in the proper element?

<img class="nav-icon" src="{{item.image}}" />

Upvotes: 0

Views: 5617

Answers (1)

Tim
Tim

Reputation: 374

You need to bind the attribute like this:

<img class="nav-icon" :src="item.image" />

Edit after comments- It seems you need to use a function to return a dynamic image like you are requesting.

This answer was my reference. Vue.js dynamic images not working

// template
    <v-img :src="getImgUrl(image_from_json.url)" />
      
    

// data
   image_from_json: {
      url: "/images/img1.jpg",
    },

// methods
    getImgUrl(img) {
      var images = require("../../assets" + img);
      return images;
    },

Upvotes: 3

Related Questions