src path is not compiled when I use backticks-CodePudding

I'm using VueJs and I'm looping over an object but the path is not interpreted.

This is my code :

<div  v-for="(shortcut, index) in template.header.shortcuts" :key="index">
   <a  href="#!">
      <img :src="`@/assets/images/icons/${shortcut.icon}`" alt="add contact"/>
      <span>{{shortcut.label}}</span> 
   </a>
</div>

the problem is in :src the @assets/images/icons/ is not interpreted

CodePudding user response：

you need to use require method to dynamically upload the local images.

<div  v-for="(shortcut, index) in template.header.shortcuts" :

key="index">
   <a  href="#!">
      <img :src="require(`@/assets/images/icons/${shortcut.icon}`)" alt="add contact"/>
      <span>{{shortcut.label}}</span> 
   </a>
</div>

CodePudding user response：

Give a try to

:src="require(`@/assets/images/icons/${shortcut.icon`)"

Pretty much as explained a lot of times here: https://stackoverflow.com/search?q=vue dynamic image

CodePudding user response：

You can do it like ->

:src='getImage(shortcut.icon)'

and method is

getImage(img) { 
  const path = `${root}/${img}` 
  return path 
}

and another method is

script part

const imgRoot = '@/assets/icons/'

template part

<img :src="`${imgRoot}${shortcut.icon}`" />