I'm facing an issue with rendering images from an array of objects. Even though the paths to the images are correct, the images are not displaying.
I've been following a tutorial at which suggests specifying the image URLs as links. I've tried using both https and http for localhost but the images remain blank.
I also attempted to manually set the image sources using a function, but encountered the same problem. I've included the small component code snippet below:
If anyone has any suggestions on what I should try next, I would greatly appreciate it :)
<template>
<div id="sideBarDiv">
<img src="../assets/Icon_3.png" height="40px" width="40px"/>
<div v-for="link in links" :key="link.id">
<p>.</p> <img v-bind:src="link.src" height="15px" width="15px"/>
</div>
</div>
</template>
<script>
export default {
name: 'sidebar',
data: function(){
return{
links:[
{
id: 0,
src: 'https://src/assets/superdash/ic_active-2.png',
isActive: false
},
{
id: 1,
src: 'https://src/assets/superdash/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="18717b47799b6c716e7d582be56f9cfcad4">[email protected]</a>',
isActive: false
},
{
id: 2,
src: 'https://src/assets/superdash/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93faf0ccf2f0e7fae5f6372f378cbc5c8dcb9cdfedec2cee5">[email protected]</a>',
isActive: false
},
{
id: 3,
src: 'https://src/assets/superdash/ic_active-3.png',
isActive: false
},
{
id: 4,
src: 'https://src/assets/superdash/ic_active-4.png',
isActive: false
}
]
}
},
methods:{
getLinkImage(img){
return ('@/assets/superdash/'+img+'.png'); //attempt to plugin image name and combine with known path to render
},
}
}
</script>