How to dynamically bind to :src of img in vue js?

Question

Following is the code for binding to src attribute of img tag. I'm being able to bind to the attribute. But the link is not getting the real icon from assets folder, instead shows a 404 or not found.

  <router-link
    v-for="nav in navigations"
    :to="'/' + nav"
  >
    <img
      class="icon"
      :src="'@/assets/icons/'+nav+'.svg'"
    />
    {{navigation}}
  </router-link>

Real question : How can I dynamically bind to an attribute with a variable between string i.e. '@/assets/icons/' + nav + '.svg' ? like this?

When I inspect the element it is showing the same path. ie @/assets/icons/{{iconnamehere}}.svg But the real icon is not showing up.

But if I do something like this without any binding <img src="@/assets/icons/logo.svg" />

then the image shows... When I inspect the element I see a replaced path something like this `

overlox · Accepted Answer · 2021-10-15 10:14:56Z

1

Hope you have figured this out by now, but turns out you have to do the following :

  methods: {
    getPic (name) {
      return require("@/assets/icons/"+name+".svg")
    }
  }

    <img
      class="icon"
      :src="getPic(nav)"
    />

answered Oct 15, 2021 at 10:14

overlox

8201 gold badge6 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

How to dynamically bind to :src of img in vue js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related