1

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.

K4liber
  • 785
  • 1
  • 8
  • 17
  • 1
    This might help you https://stackoverflow.com/questions/38164102/change-hard-coded-url-constants-for-different-environments-via-webpack – Gowthaman May 03 '20 at 05:26

2 Answers2

0

I work it out:

  1. When I run webpack node server I add mode environment variable:
    NODE_ENV=development node server.js
  2. I changed img src to:
    <img :src="`${STATIC_URL}/webapp/img/logo.png`" alt="logo">
  3. 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.

K4liber
  • 785
  • 1
  • 8
  • 17
0

You can also just use window.location.origin to get the current base url. In this way you can avoid any manual mapping based on the NODE_ENV

<img :src="`${publicPath}/static/example.jpg`" />

  data() {
    return {
      publicPath: window.location.origin
     }
   },
Beeblebrox
  • 36
  • 4