I'm using VueJs and I'm looping over an object but the path is not interpreted.
This is my code :
<div class="col" v-for="(shortcut, index) in template.header.shortcuts" :key="index">
<a class="dropdown-icon-item" 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
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
you need to use require method to dynamically upload the local images.
<div class="col" v-for="(shortcut, index) in template.header.shortcuts" :
key="index">
<a class="dropdown-icon-item" href="#!">
<img :src="require(`@/assets/images/icons/${shortcut.icon}`)" alt="add contact"/>
<span>{{shortcut.label}}</span>
</a>
</div>
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}`" />