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
– Gowthaman, Commented May 3, 2020 at 5:26

K4liber · Accepted Answer · 2020-05-03 08:01:20Z

1

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.

answered May 3, 2020 at 8:01

K4liber

9231 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Beeblebrox · Accepted Answer · 2022-02-16 17:38:25Z

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
     }
   },

answered Feb 16, 2022 at 17:38

Beeblebrox

364 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related