I am currently working on a VueJS project that was customized from a base "webpack-simple" template provided by vue-cli, and it follows the folder structure below:
https://i.sstatic.net/C3vxY.png
My main focus right now is developing the "clickableimage.vue" component. However, I'm facing some challenges when referencing assets such as images within this component. Below is the snippet of code for the component:
<template>
<div id="clickableimagecomponent">
<img :src="imageURL" ></img>
<p>Hello There....</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
imageURL:"./dist/loading.gif",
msg: 'Welcome to Your Vue.js App'
}
},
}
</script>
I have configured webpack to build the "clickableimage.js" file and place it in the "dist" folder.
The issue I'm encountering is that when using src (without any vue bindings) for the img tag as "./assets/loading.gif," it works perfectly. Strangely though, even when there is no "loading.gif" file in the dist folder, the code still functions. Upon debugging in Firefox, I noticed the following:
https://i.sstatic.net/wTGrl.png
It appears that the file is being loaded from dist/loading.gif, despite not existing in the folder.
https://i.sstatic.net/TkLgJ.png
Could there be something I'm overlooking? I'm perplexed as to how the browser is able to load the file without it physically being present. Is VueJS performing some sort of magic behind the scenes?
P.S : To rule out any caching issues, I tried opening the URL in an incognito window in Firefox, but it continues to work flawlessly.
Below is my webpack configuration: