How to include Vue component with image in Vite and Laravel 10

Question

In my Vue component, for example Login.vue, I use an img tag to display an image ：

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

Then run npm run dev in the terminal, everything works normally and the pictures can be displayed normally.

Now when I run npm run build I get the following error:

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

Why does everything work fine when I run npm run dev, but when I run npm run build I get this error? How can I solve this problem?

Answer 1

One problem I found is that you are trying to use "absolute paths" to bundle your image assets: you start the path with a backslash, src="/assets/img/logo.png". Therefore, it will not be included in the build. You can include the resource yourself in a public file or a file within the public file, or use a relative path to reference the resource (do not start the path with a backslash).

Reference: Laravel 10 Documentation #URL Handling

The document states:

```html