My goal is to showcase several JPG pictures located in the src/assets/images folder by utilizing the v-for directive. However, it seems like the browser is having trouble locating them. Interestingly, manually adding the pictures with the same paths works perfectly fine. I have included the code below for reference. See the Screenshot of Page.
<template>
<div>
<h2>Success</h2>
<img src="@/assets/images/1.jpg" width="10%" />
<img src="@/assets/images/2.jpg" width="10%" />
<h2>Failure</h2>
<img
v-for="(image, i) in images"
:src="image.url"
:key="i"
@click="showProp(image.url, i)"
width="10%"
/>
</div>
</template>
<script>
export default {
methods: {
showProp: function (url, i) {
console.log(url, " and ", i);
},
},
data() {
return {
images: [
{ url: "@/assets/images/1.jpg" },
{ url: "@/assets/images/2.jpg" },
],
};
},
};
</script>
<style scoped>
h2 {
padding: 30px;
}
</style>
Upon clicking on the broken images in the browser, starting from the left image to the right one, the console displays:
@/assets/images/1.jpg and 0
@/assets/images/2.jpg and 1
What have I attempted so far?
- Reviewed previous Stack Overflow posts [1,2] for potential solutions
- Experimented with different Path-Syntax (@/assets/ OR ../assets/)
- Removed any aesthetic elements
- Tried enforcing a type match of image.url using String(image.url)
1: Vue.js image v-for bind
2: How to reference static assets within vue javascript
Additional Notes:
- This component is embedded within a Vue-Router
- Inspecting the HTML elements of the rendered page revealed that manual IMG entries were processed differently than dynamic ones. [3]
- I am using a Win10 machine with local Admin rights
- I also observed that
AND<img :src="path" />
fails to work.data(){return{ path: "@/assets/images/2.jpg"}}