Recently, I started working with Vue.js and found it simple enough to access the assets folder for static images like my logo:
<img src="../assets/logo.png">
However, when using v-for to populate a list with sample data, the image paths seem to be causing trouble. Here is my template:
<ul>
<li v-for="item in items" :key="item.id">
<img v-bind:src="item.img" v-bind:alt="item.title">
<h2 class="md-title">{{item.title}}</h2>
</li>
</ul>
Here is the sample data declared within the same .vue file:
export default {
name: 'front',
data () {
return {
items: [
{title: 'Google Pixel', img: '../assets/pixel.png', id: 1},
{title: 'Samsung Galaxy S8', img: '../assets/s8.png', id: 2},
{title: 'iPhone 7', img: '../assets/iphone.png', id: 3}
]
}
}
}
All the image URLs are resulting in a 404 error, despite working fine for static images. Using an absolute path like this one works:
https://media.carphonewarehouse.com/is/image/cpw2/pixelBLACK?$xl-standard$
I checked the documentation and came across this reference
Though I tried all the suggested methods for resolving assets, none of them seemed to work:
Asset Resolving Rules
Relative URLs, e.g. ./assets/logo.png will be interpreted as a module dependency. They will be replaced with an auto-generated URL based on your Webpack output configuration.
Non-prefixed URLs, e.g. assets/logo.png will be treated the same as the relative URLs and translated into ./assets/logo.png.
URLs prefixed with ~ are treated as a module request, similar to require('some-module/image.png'). You need to use this prefix if you want to leverage Webpack's module resolving configurations. For example if you have a resolve alias for assets, you need to use to ensure that alias is respected.
Root-relative URLs, e.g. /assets/logo.png are not processed at all.
Could this be an issue related to webpack rather than Vue? It seems odd that such a user-friendly library would make dealing with filepaths complex.