Les actifs vue3+vite introduisent dynamiquement des images et résolvent le problème du chemin d'image incorrect qui ne s'affiche pas après l'empaquetage

vite La configuration officielle par défaut, si le fichier de ressources est empaqueté dans le dossier assets, la valeur de hachage sera ajoutée au nom de l'image, mais si elle est introduite directement via : src="imgSrc", elle ne sera pas analysée lors de l'empaquetage , ce qui rend l'environnement de développement normal. Introduit, le problème ne peut pas être affiché après l'empaquetage

Nous voyons que nous ne voulons en fait pas que les fichiers de ressources soient compilés par wbpackIl sera plus facile de mettre les images dans le répertoire public. Qu'il s'agisse d'un environnement de développement ou d'un environnement de production, il peut toujours être conservé dans le répertoire racine. Les chemins des images sont cohérents, ce qui est cohérent avec webpack

En voyant cela, peut-être que le problème est résolu si vous en avez vraiment besoin. pour mettre les fichiers statiques dans les actifs dans Vite, regardons en bas :

Ici Supposons d'abord :
Répertoire de fichiers statiques : src/assets/images/src/assets/images/
我们的目标静态文件在 src/assets/images/home/home_icon.png

<img  :src="require(&#39;@/assets/images/home/home_icon.png&#39;)" / alt="Les actifs vue3+vite introduisent dynamiquement des images et résolvent le problème du chemin d'image incorrect qui ne s'affiche pas après l'empaquetage" >

尝试过require动态引入， 发现报错：require is not defind，这是因为 require 是属于 Webpack 的方法

第一种方式（适用于处理单个链接的资源文件）

import homeIcon from '@/assets/images/home/home_icon.png'
<img  :src="homeIcon" / alt="Les actifs vue3+vite introduisent dynamiquement des images et résolvent le problème du chemin d'image incorrect qui ne s'affiche pas après l'empaquetage" >

第二种方式（适用于处理多个链接的资源文件）

推荐，这种方式传入的变量可以动态传入文件路径！！

静态资源处理 | Vite 官方中文文档
new URL() + import.meta.url

这里我们假设：
工具文件目录： src/util/pub-use.ts
pub-use.ts

// 获取assets静态资源
export default  const getAssetsFile = (url: string) => {
   return new URL(`../assets/images/${url}`, import.meta.url).href
}

使用

import usePub from '@/util/public-use'
setup () {
  const Pub = usePub()
  const getAssetsFile = Pub.getAssetsFile
  return { getAssetsFile }
}

可以包含文件路径

<img  :src="getAssetsFile(&#39;/home/home_icon.png&#39;)" / alt="Les actifs vue3+vite introduisent dynamiquement des images et résolvent le problème du chemin d'image incorrect qui ne s'affiche pas après l'empaquetage" >

第三种方式（适用于处理多个链接的资源文件）

不推荐，这种方式引入的文件必须指定到具体文件夹路径，传入的变量中只能为文件名，不能包含文件路径

使用vite的import.meta.glob或import.meta.globEager，两者的区别是前者懒加载资源，后者直接引入。

这里我们假设：
工具文件目录： src/util/pub-use.tsNotre fichier statique cible est dans src/assets/images/home/home_icon.png

// 获取assets静态资源
export default const getAssetsHomeFile = (url: string) => {
    const path = `../assets/images/home/${url}`;
    const modules = import.meta.globEager("../assets/images/home/*");
    return modules[path].default;
}

J'ai essayé l'introduction dynamique de require et j'ai trouvé une erreur : require is not defind C'est parce que require est une méthode appartenant. à Webpack

La première méthode (applicable au traitement de fichiers de ressources liés uniques)

import usePub from '@/util/public-use'
setup () {
  const Pub = usePub()
  const getAssetsHomeFile = Pub.getAssetsHomeFile 
  return { getAssetsHomeFile }
}

La deuxième méthode (adaptée au traitement de plusieurs fichiers de ressources liés)

Recommandé, les variables transmises de cette manière peuvent être transmises dynamiquement dans le fichier chemin! !

Traitement des ressources statiques | Document chinois officiel de Vite

nouvelle URL() + import.meta.url

Ici, nous supposons :

Répertoire de fichiers d'outils : src/util/pub-use.ts🎜pub-use.ts🎜

<img  :src="getAssetsHomeFile(&#39;home_icon.png&#39;)" / alt="Les actifs vue3+vite introduisent dynamiquement des images et résolvent le problème du chemin d'image incorrect qui ne s'affiche pas après l'empaquetage" >

🎜Utilisez 🎜

.imgText {
  background-image: url('../../assets/images/1462466500644.jpg');
}

🎜 pour inclure les chemins de fichiers🎜

.imgText {
  background-image: url('src/assets/images/1462466500644.jpg');
}

🎜La troisième méthode (adaptée à la gestion de plusieurs fichiers de ressources liés) 🎜🎜🎜Non recommandé, les fichiers introduits de cette manière doivent être spécifiés Au spécifique chemin du dossier, la variable transmise ne peut être que le nom du fichier et ne peut pas contenir le chemin du fichier🎜🎜🎜Utilisez le import.meta.glob ou le import.meta.globEager code> de vite, la différence entre les deux est que le premier charge les ressources paresseusement, tandis que le second les introduit directement. 🎜🎜🎜Ici, nous supposons : 🎜🎜Répertoire des fichiers de l'outil : <code>src/util/pub-use.ts🎜pub-use.ts🎜rrreee🎜L'utilisation de 🎜rrreee🎜ne peut pas contenir de chemins de fichiers🎜rrreee🎜Supplément : Si l'image d'arrière-plan est introduite (doit utiliser un chemin relatif)🎜rrreee🎜L'environnement de production ajoutera automatiquement le hachage et le chemin est correct🎜🎜🎜🎜🎜L'utilisation incorrecte suivante, en utilisant le chemin absolu, peut être affichée normalement dans l'environnement de développement, mais ce sera le cas. Par conséquent, le chemin empaqueté est incorrect🎜rrreee🎜Ressource de l'environnement de production 404 :🎜🎜🎜🎜

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!