So integrieren Sie die Vue-Komponente eines Bildes in Vite und Laravel 10

Question

In meiner Vue-Komponente, zum Beispiel Login.vueLogin.vue，我使用了一个img, verwende ich ein img

-Tag, um ein Bild anzuzeigen:

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

npm run devDann führen Sie es im Terminal aus

, alles funktioniert normal und die Bilder werden normal angezeigt.

npm run buildWenn ich jetzt

ausführe, erhalte ich die folgende Fehlermeldung:

build.rollupOptions.external[vite]: Rollup kann „/assets/img/logo.png“, importiert aus „C:/Users/Ali/Desktop/Projects/ajorplus/resources/js/Pages/Auth/Login.vue“, nicht analysieren. Dies ist höchstwahrscheinlich unbeabsichtigt, da es Ihre Anwendung zur Laufzeit beschädigen könnte. Wenn Sie dieses Modul wirklich externalisieren möchten, fügen Sie es explizit zu build.rollupOptions.external hinzu. Fehler: Fehler: [vite]: Rollup kann „/assets/img/logo.png“, das aus „C:/Users/Ali/Desktop/Projects/ajorplus/resources/js/Pages/Auth/Login.vue“ importiert wurde, nicht analysieren. Dies ist höchstwahrscheinlich unbeabsichtigt, da es Ihre Anwendung zur Laufzeit beschädigen könnte. Wenn Sie dieses Modul wirklich externalisieren möchten, fügen Sie es explizit zu

hinzu 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 [als 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 Datei:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/rollup/dist/es/shared/node-entry.js:24616:26

npm run dev时一切正常，但当我运行npm run buildWarum funktioniert alles gut, wenn ich

laufe, aber wenn ich laufe 🎜 erhalte ich diese Fehlermeldung? Wie kann ich dieses Problem lösen? 🎜

Answer 1

我发现的一个问题是，你试图使用“绝对路径”来捆绑你的图像资源：你用反斜杠开头的路径，src="/assets/img/logo.png"。因此，它不会被包含在构建中。你可以自己将资源包含在公共文件或者公共文件的一个文件中，或者使用相对路径来引用资源（不要以反斜杠开头的路径）。

参考： Laravel 10 文档 #URL 处理

文档中写道：

```html