How to include images in Vue Components in vite and laravel 10

Question

In one of my Vue Components, for example Login.vue I have used an img tag to display an image :

<img class="logo-img" src="/assets/img/logo.png" alt="...">

Then in my terminal I run npm run dev and everything works just fine and image will be displayed with no problem.

Now when I run npm run build I face following error :

[vite]: Rollup failed to resolve import "/assets/img/logo.png" from "C:/Users/Ali/Desktop/Projects/ajorplus/resources/js/Pages/Auth/Login.vue". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to build.rollupOptions.external error during build: Error: [vite]: Rollup failed to resolve import "/assets/img/logo.png" from "C:/Users/Ali/Desktop/Projects/ajorplus/resources/js/Pages/Auth/Login.vue". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to build.rollupOptions.external at viteWarn (file:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/vite/dist/node/chunks/dep-abb4f102.js:48051:27) at onRollupWarning (file:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/vite/dist/node/chunks/dep-abb4f102.js:48083:9) at onwarn (file:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/vite/dist/node/chunks/dep-abb4f102.js:47814:13) at file:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/rollup/dist/es/shared/node-entry.js:24070:13 at Object.logger [as onLog] (file:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/rollup/dist/es/shared/node-entry.js:25742:9) at ModuleLoader.handleInvalidResolvedId (file:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/rollup/dist/es/shared/node-entry.js:24656:26) at file:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/rollup/dist/es/shared/node-entry.js:24616:26

Why when I run npm run dev it works just fine, and when I run npm run build I face this error? How can I fix this problem?

Answer 1

If you want to use content inside your public folder, it's easy, you just add a / at the beginning of your path:

<img src='/assets/img/example.png' />

But, if you have located your content inside resources folder, then it becomes a bid tricky.

Imagine your working directory looks something like this :

resources
|____ images
|     |____ map.jpg
|____ js
|      |____ Pages
|            |_____ Test.vue
|
|____ css // its content (not important in this example)
|____ views  // its content (not important in this example)

Then inside your Test.vue file, You normally include your image this way:
(There is a better way which I am going to mention)

<img src="../../images/map.jpg">

First of all when you use multiple '../'s, your path looks ugly, and second of all if in future you decide to relocate your component you have to modify the path again.

So, it's better to define alias. If we add following block inside vite.config.js file, 2 aliases will be defined:

export default defineConfig({
    plugins: [
        ...
    ],
     // ↓↓↓↓ ADD THIS ↓↓↓↓
    resolve: {
        alias: {
            "@": "/resources",
            "@img": "/resources/images",
        },
    },
});

Now that we have added 2 new aliases there are 2 ways to write your path:

First Way

<img src="@/images/map.jpg" />

Second Way

<img src="@img/map.jpg" />

This way, you no longer have to write all those '../'s in your path