CODEWITHSUNDEEP
javascriptweb-applicationswebpackvue.js
Raghavendra Kumar
Raghavendra Kumar

Reputation: 728

Referencing static assets in VueJS Components

I have a VueJS project (customized from a base "webpack-simple" template provided by vue-cli) with the following folder structure

Project Folder Structure

I am developing the "clickableimage.vue" component and am having trouble referencing assets like images. Code for the component is given below.

<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 setup webpack to take build the "clickableimage.js" file and drop it into the "dist" folder.

The problem I am facing is that in the component, when I am using src (without any vue bindings) for the img tag as "./assets/loading.gif" it works.

However, the above code also works, when there is no "loading.gif" file in the dist folder. Debugging the JS in FF shows the following.

JS debug in Firefox

Clearly the file is being loaded from dist/loading.gif, however, no such file exists in the folder.

Folder Structure

Am i missing something here? I am unable to trace how the browser is able to load the file. Is VueJS doing any behind the scenes magic??

P.S : Just to be sure, I have opened the URL in an incognito window in FF, just in case the browser might be showing a cached version, but it works there too.

My webpack config is as follows..

Webpack Config

Upvotes: 1

Views: 1162

Answers (1)

Theo
Theo

Reputation: 2799

I'm only brainstorming here... I think it has to do with the Hot Module Reloading not being perfect. If you had it as "./assets/loading.gif" then that would match test: /\.(png|jpg|gif|svg)$/, and that should produce a base64 encoded image that gets embedded in the script that it bundles (and not placed in the dist folder). Now perhaps what happened when you changed it to "./dist/loading.gif", is that it still searched for loading.gif in the script which in the dev environment might still be available since you initially ran the dev server with "./assets/loading.gif". I'm no expert, but I think the img-loader in your webpack config is taking your "./dist/loading.gif" and intelligently finding the image in one of the webpack chunks that was initially built. If you were to start the dev server with "./dist/loading.gif", my guess is it would not work as you initially expected it too.

Upvotes: 1

Related Questions