Vue 3 + webpack 5: cannot load images

Question

In a Vue 3 project with Webpack 5, I am struggling to show images in the project.

My component has a simple img tag:

<template> <div> <img src="./assets/logo.png" /> </div> </template>

and my project has a src/assets folder with this logo.png

I have added the in webpack a rule to use the file-loader:

{ test: /\.(png|jpe?g|gif)$/i, loader: 'file-loader', },

when I open the browser, for some reason the src from the image has this strange chrome-extension before:

`

I cannot find anything in the docs about this. I tried to change the loader to the url-loader but the problem is the same. If I move the image to an scss file and use as background, same happens.

Anyone has any idea?

Used several loaders

Answer 1

{
    test: /\.(png|jpe?g|gif)$/i, 
    loader: 'file-loader',
    options: {
      name: '/images/[name].[ext]'
    }
}

and therefore you see the image emitted to dist/images/[name].[ext]

So your import should really just be:

import img from '/images/[name].[ext]'