How to load static file image in Vue component with Django Application

Question

I am currently using laravel-mix, Django, and Vue together. I would like to load the static image inside the Vue component. My images store in static/img folder

First of all, I have set up an alias in Webpack config pointing to the static folder.

const path = require('path')

let publicPath = 'src/static'
module.exports = {
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            '@': path.join(__dirname, publicPath)
        },
    },
}

And load the image in Vue component

<img :src='require(`@/img/Blue.jpg`).default' alt="">

I can't load images and Webpack generated new images into the images folder. How to prevent it and load image correct

score 0 · Answer 1 · answered Mar 09 '22 at 06:15

0

change this from

<img :src='require(`@/img/Blue.jpg`).default' alt="">

To:

<img :src="require('@/img/Blue.jpg')" alt="">

hope this may be help u

answered Mar 09 '22 at 06:15

Manoj Tolagekar

1,816
2
5
22

it can't it will generate to like that ``. and it will generate new image to the images folder – ToujouAya Mar 09 '22 at 06:18
what exactly u want – Manoj Tolagekar Mar 09 '22 at 06:22
I want to display the image and disable generate image when webpack complied – ToujouAya Mar 09 '22 at 06:25
refer it: https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working – Manoj Tolagekar Mar 09 '22 at 06:34
I have tried it but it is not working in my case – ToujouAya Mar 09 '22 at 06:51

How to load static file image in Vue component with Django Application

1 Answers1