0

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}}" />
M. Straw
  • 440
  • 12
  • 26

1 Answers1

3

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;
    },
Tim
  • 344
  • 1
  • 12
  • 2
    I would add that if you use webpack, you may need to add a require wrapper: :src="require(item.image)" – Anzu Pai Jul 27 '21 at 09:49
  • Thank you. This is pulling in the file properly. Just one quick follow up: since I'm pulling in the image via JSON like " image:"../assets/images/icons/small_referral.png"" it doesn't actually bring the actual image in because it just appends to the URL after building. Is there something that I need to do? – M. Straw Jul 27 '21 at 13:35
  • 1
    This seems to be a webpack issue and has been answered here: https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working I'll put a snippet in my original answer for formatting sake. – Tim Jul 27 '21 at 14:00