How to include Vue component with image in Vite and Laravel 10-PHP Chinese Network Q&A

In my Vue component, for exampleLogin.vue, I use animgtag to display an image ：

Then runnpm run devin the terminal, everything works normally and the pictures can be displayed normally.

Now when I runnpm run buildI 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 tobuild.rollupOptions.externalError: 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 tobuild.rollupOptions.externalin 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 runnpm run dev, but when I runnpm run buildI get this error? How can I solve this problem?

reply all (1)

P粉7636623902023-09-18 10:59:52 1 floor

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