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

Answer 1

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