Comment résoudre le problème des images de ressources statiques invalides après l'empaquetage de vue

Ci-dessous, je partagerai avec vous un article qui résout le problème des images de ressources statiques invalides après l'empaquetage de vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

1. Description du problème

Dans le développement de projets, lorsque nous emballons le fichier via npm, exécutons build et mettons le fichier sur le serveur, il Il y a généralement un problème d'échec d'image et la console indique qu'une certaine image n'est pas trouvée (erreur 404). Ces images peuvent être des images introduites avec src, ou elles peuvent être des images d'arrière-plan définies en CSS. Le fait que l'image puisse être affichée est directement lié à l'emplacement de votre fichier de ressources statiques et au chemin importé. Voici la méthode de stockage de fichiers et d'écriture de chemin d'un de mes projets !

2. Une des solutions

L'emplacement de stockage statique des ressources statiques est placé dans le répertoire src

Vous vous demandez peut-être pourquoi il est placé dans le répertoire src ? Ne peut-il pas être placé dans le même répertoire que src ? Eh bien, au début, je l'ai mis dans le même répertoire que src, mais lorsque j'ai introduit une image d'arrière-plan dans un certain fichier CSS, l'image est devenue invalide après l'empaquetage, je l'ai introduite comme ceci

La pratique a prouvé que cette façon d'écrire est erronée. Cela entraînera de nombreuses erreurs (telles que des erreurs de chargement CSS) lorsque vous l'emballez, et même le projet ne peut pas s'exécuter.

J'ai donc utilisé la méthode d'écriture suivante :

Cette méthode d'écriture n'est pas non plus autorisée, car Votre fichier de ressources statiques static n'est pas dans le répertoire src, et dans Vue, le répertoire src est relatif au répertoire racine qui est le répertoire src, donc si vous souhaitez utiliser la méthode d'écriture ci-dessus, vous devez mettre static dans le répertoire src. Comme le montrent les figures 1 et 2 ci-dessus

Remarque : static/images/user.png ne peut pas être écrit sous la forme /static/images/user.png, sinon l'image sera toujours invalide. .

Ce qui précède concerne l'emplacement de stockage des fichiers et l'introduction des images dans le CSS. Si l'image est introduite via la balise img, c'est relativement simple, écrivez simplement l'adresse absolue. et le dossier statique de la ressource statique L'emplacement peut être dans src, ou il peut être placé au même niveau que src, mais afin d'éviter la situation ci-dessus, mettez-le simplement dans src !

img importe des images :

Ce qui précède est un moyen de résoudre le problème de l'échec de l'image. Bien sûr, si vous l'avez fait. utiliser static Le répertoire des ressources est placé dans le même répertoire que src. Il existe également des solutions, comme l'importation d'images (je n'ai pas pratiqué cela), vous pouvez l'essayer vous-même !

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Implémentation de chemins d'images statiques locaux dans l'utilisation de vue (tutoriel détaillé)

Principales icônes de police selon la configuration du webpack Solution Impossible d'afficher (Tutoriel détaillé)

Utilisation du framework d'expérience utilisateur BootStrap dans React (Tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!