Comment inclure le composant Vue de l'image dans Vite et Laravel 10

Question

Dans mon composant Vue, par exemple Login.vueLogin.vue，我使用了一个img, j'utilise une balise img

pour afficher une image :

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

npm run devEnsuite, exécutez-le dans le terminal

, tout fonctionne normalement et les images s'affichent normalement.

npm run buildMaintenant, lorsque je lance

, j'obtiens l'erreur suivante :

build.rollupOptions.external[vite] : Rollup ne peut pas analyser "/assets/img/logo.png" importé de "C:/Users/Ali/Desktop/Projects/ajorplus/resources/js/Pages/Auth/Login.vue". Ceci est probablement involontaire car cela pourrait interrompre votre application au moment de l'exécution. Si vous souhaitez vraiment externaliser ce module, ajoutez-le explicitement à build.rollupOptions.external Erreur : Erreur : [vite] : Le rollup ne peut pas analyser "/assets/img/logo.png" importé de "C:/Users/Ali/Desktop/Projects/ajorplus/resources/js/Pages/Auth/Login.vue". Ceci est probablement involontaire car cela pourrait interrompre votre application au moment de l'exécution. Si vous souhaitez vraiment externaliser ce module, ajoutez-le explicitement à

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

npm run dev时一切正常，但当我运行npm run buildPourquoi tout fonctionne bien quand je cours

mais quand je cours 🎜 j'obtiens cette erreur ? Comment puis-je résoudre ce problème? 🎜

Answer 1

Un problème que j'ai trouvé est que vous essayez d'utiliser des "chemins absolus" pour regrouper vos ressources d'image : vous commencez le chemin par une barre oblique inverse, src="/assets/img/logo.png". Il ne sera donc pas inclus dans la build. Vous pouvez inclure la ressource vous-même dans un fichier public ou un fichier dans le fichier public, ou utiliser un chemin relatif pour référencer la ressource (ne commencez pas le chemin par une barre oblique inverse).

Référence : Documentation Laravel 10 #Gestion des URL

Le document dit :

```html