Bagaimana untuk memasukkan komponen imej Vue dalam Vite dan Laravel 10

Question

Dalam komponen Vue saya, contohnya Login.vueLogin.vue，我使用了一个img, saya menggunakan tag img

untuk memaparkan imej:

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

npm run devKemudian jalankannya di terminal

, semuanya berfungsi seperti biasa dan gambar dipaparkan seperti biasa.

npm run buildSekarang apabila saya berlari

saya mendapat ralat berikut:

build.rollupOptions.external[vite]: Rollup tidak boleh menghuraikan "/assets/img/logo.png" yang diimport daripada "C:/Users/Ali/Desktop/Projects/ajorplus/resources/js/Pages/Auth/Login.vue". Ini berkemungkinan besar tidak disengajakan kerana ia boleh memecahkan aplikasi anda semasa runtime. Jika anda benar-benar ingin mengubah modul ini, tambahkannya secara eksplisit pada build.rollupOptions.external Ralat: Ralat: [vite]: Rollup tidak boleh menghuraikan "/assets/img/logo.png" yang diimport daripada "C:/Users/Ali/Desktop/Projects/ajorplus/resources/js/Pages/Auth/Login.vue". Ini berkemungkinan besar tidak disengajakan kerana ia boleh memecahkan aplikasi anda semasa runtime. Jika anda benar-benar ingin mengubah modul ini, tambahkannya secara eksplisit pada

dalam viteWarn (file:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/vite/dist/node/chunks/dep-abb4f102.js:48051:27) dalam onRollupWarning (file:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/vite/dist/node/chunks/dep-abb4f102.js:48083:9) dalam onwarn (fail:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/vite/dist/node/chunks/dep-abb4f102.js:47814:13) Dalam fail:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/rollup/dist/es/shared/node-entry.js:24070:13 dalam Object.logger [as onLog] (file:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/rollup/dist/es/shared/node-entry.js:25742:9) dalam ModuleLoader.handleInvalidResolvedId (file:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/rollup/dist/es/shared/node-entry.js:24656:26) Dalam fail:///C:/Users/Ali/Desktop/Projects/ajorplus/node_modules/rollup/dist/es/shared/node-entry.js:24616:26

npm run dev时一切正常，但当我运行npm run buildMengapa semuanya berfungsi dengan baik apabila saya berlari

tetapi apabila saya berlari 🎜 saya mendapat ralat ini? Bagaimanakah saya boleh menyelesaikan masalah ini? 🎜

Answer 1

Satu masalah yang saya temui ialah anda cuba menggunakan "laluan mutlak" untuk menggabungkan sumber imej anda: anda memulakan laluan dengan garis miring ke belakang, src="/assets/img/logo.png". Oleh itu, ia tidak akan dimasukkan ke dalam binaan. Anda boleh memasukkan sumber itu sendiri dalam fail awam atau fail dalam fail awam, atau menggunakan laluan relatif untuk merujuk sumber (jangan mulakan laluan dengan garis miring ke belakang).

Rujukan: Dokumentasi Laravel 10 #Pengendalian URL

Dokumen itu berkata:

```html