Another question about static assets in vuejs

user_529659 0
Viewed 106

I am seeing new behavior in vuejs when trying to set the img src in a vue component. The img src keeps getting set to something that looks like my publicPath (app/mm/dist/dev). This project is using vuetify; but I don't see how vuetify would get involved in a straight <img> tag.

My template looks like this:

<img id="activity" :src="asyncImg" class="async-img" />

In the script block I am doing this:

data: function() {
    return {
        asyncImg: require("@/assets/async.gif")
    };
},

And what I am getting is this:

<img data-v-2a5cd2eb="" 
     id="activity" 
     src="/app/mm/distdevasync.gif?817596d6626736251eea50f61b9492a4" 
     class="async-img">
vue.js webpack
1 Answers

Ok, figured this out. Has nothing to do with vue.js or vuetify, everything to do with webpack. The publicPath needs to end in a slash. I was doing this:

var PROD = (process.env.NODE_ENV === 'production')
var DEV = (process.env.NODE_ENV === 'development')
...
   publicPath:
        PROD
            ? '/app/mm/dist/prd'
            : DEV
                ? '/app/mm/dist/dev'  // standard development, devw
                : '/dist',    // hot-reload, devhr

Needs to be this:

  ...
  publicPath:
    PROD
        ? '/app/mm/dist/prd/'
        : DEV
            ? '/app/mm/dist/dev/'  // standard development, devw
            : '/dist/',    // hot-reload, devhr

Note the "/" at the end of all paths. Been using vue-cli so long now I forgot almost everything I once knew about webpack config. This is an old project started before the vue-cli days, so asset management in webpack is old-skool; all assets output to the publicPath.

user_5296590
Related