Vue.js img src using absolute path (django+webpack)

Question

I am using django + Vue.js & webpack for development. In my App.vue file i try to load img:
<img src="/static/webapp/img/logo.png" alt="logo">
In production I use nginx which is directing /static path into static folder that I share and it's working.
But in the development when i run my django on localhost:8000 and load this js from my App.vue it's trying to get the image from localhost:8000/static/webapp/img/logo.png.
I would like it to take from localhost:8082/static/webapp/img/logo.png (localhost:8082 is where webpack is running) where it can be found.
I tryied to change publicPath in my webpack.config.js:

if (process.env.NODE_ENV === 'development') {  
  module.exports.output.publicPath = 'http://localhost:8082/'
}

but it does not change default behaviour and the img asset src is still localhost:8000/static/webapp/img/logo.png.
How can I change img assets default base path to another url to make it work?
Cheers.

This might help you stackoverflow.com/questions/38164102/… — Gowthaman

jasiuuu jasiuuu · Accepted Answer · 2020-05-03T08:01:20

I work it out:

When I run webpack node server I add mode environment variable:
NODE_ENV=development node server.js
I changed img src to:
<img :src="`${STATIC_URL}/webapp/img/logo.png`" alt="logo">
Setup STATIC_URL based on NODE_ENV:

export default {
  ...,
  data () {
    return {
      ...,
      STATIC_URL: process.env.NODE_ENV === "development" ? "http://localhost:8082/static" : "/static"
    }
  }
}

And it works how it's supposed to. Cheers.

Vue.js img src using absolute path (django+webpack)

1 Answers