Comment remplacer les images locales dans Vue

Méthode Vue pour remplacer les images locales : 1. Convertissez l'image au format base64 via "" ; 2. Utilisez import pour introduire l'image ; 3. Utilisez require pour charger dynamiquement ; 4. Introduisez "publicPath" et insérez-le dans le chemin ; pour y parvenir, introduisez simplement des changements dynamiques dans le chemin.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version vue3, ordinateur DELL G3

Comment remplacer les images locales par Vue ?

vue charge dynamiquement les images locales

Aujourd'hui, j'ai rencontré un problème lors de l'introduction d'images locales dans le fichier vue, j'ai donc rédigé cet article.

Habituellement, une de nos balises img s'écrit comme ceci en html :

<img src="../images/demo.png">

Cette façon d'écrire ne peut référencer que des images sous des chemins relatifs. Les chemins absolus ne peuvent pas être utilisés. Si vous utilisez un chemin absolu, ces ressources seront copiées directement sans être traitées par webpack.

Si src est une variable, nous définissons généralement une variable src dans les données pour la liaison dynamique.

<img :src="src">//data中定义变量src
data() {
  return {
    src: '../images/demo.png' 
  }
}

Cependant, à ce moment, vous constaterez que l'image n'a pas été chargée et que l'image ne s'affiche pas. En vérifiant, on constate que l'adresse de cette image indique ../images/demo. .png C'est-à-dire que le chemin relatif lié via v-bind ne sera pas traité par le file-loader de webpack et ne subira qu'un simple remplacement de texte. ../images/demo.png ，也就是说通过v-bind形式绑定的相对路径不会被webpack的file-loader处理，只会做简单的文本替换。

那怎么办呢？

解决方法

1、将图片转**base64**格式

<img src="data:image/png;base64,iVBYKIGloxxxxxxxxxxxxxxxxxxx...">

一般图片比较小的可以这么做，比如图标icon等，大小一般在10KB以内的。

2、使用**import**引入图片

<img :src="src">//使用import引入
import img from '../images/demo.png'

//data中定义变量src
data() {
  return {
    src: img 
  }
}

3、使用**require**动态加载

<img :src="src">//data中定义变量src
data() {
  return {
    src: require('../images/demo.png')
  }
}

4、引入**publicPath**并且将其拼接在路径中，实现引入路径的动态变动

<img :src="publicPath + &#39;images/demo.jpg&#39;" alt=""> // √
// 编译后:<img src="/foo/images/demo.jpg" alt=""><script>export default:{
    data(){
        return {
          publicPath: process.env.BASE_URL,
        }
    },}</script>

在vue.config.js中配置publicPath

Que devons-nous faire ?

Solution

1 Convertir l'image en

**base64**🎜format🎜🎜🎜

//vue.config.jsmodule.exports = {
    publicPath:'/foo/',
    ...}

🎜

Cela peut être fait pour des images généralement petites, telles que des icônes, etc., et la taille est généralement inférieure à 10 Ko. 🎜

🎜2. Utilisez 🎜**import**🎜Introduisez des images🎜🎜🎜

background: url('./iphonexs.png') 0 0 no-repeat;

🎜

🎜3. 🎜**require**🎜Chargement dynamique🎜🎜🎜

background: url(/resources/dist/images/iphonexs.a25bee7.png) 0 0 no-repeat;

🎜

🎜4 Présentez 🎜**publicPath**🎜et Insérez-le dans le chemin pour obtenir des changements dynamiques dans le chemin introduit🎜🎜🎜

<div 
  :style="{&#39;background&#39;: &#39;url(&#39; + require(&#39;./iphonexs.png&#39;) + &#39;) 0 0 no-repeat&#39;}"></div>

🎜

Configurez publicPathdans vue.config.js > Chemin : 🎜🎜rrreee🎜

结论

静态资源可以通过两种方式进行处理：

• 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
  
  
• 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
  
  

原理

从相对路径导入

当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。

在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

用绝对路径引入时，路径读取的是public文件夹中的资源，任何放置在 public 文件夹的静态资源都会被简单的复制到编译后的目录中，而不经过 webpack特殊处理。

当你的应用被部署在一个域名的根路径上时，比如http://www.abc.com/，此时这种引入方式可以正常显示但是如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀，publicPath 是部署应用包时的基本 URL，需要在 vue.config.js 中进行配置。

扩展

关于vue file-loader vs url-loader

如果我们希望在页面引入图片（包括img的src和background的url）。当我们基于webpack进行开发时，引入图片会遇到一些问题。

其中一个就是引用路径的问题。拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
另外，如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

url-loader和file-loader是什么关系呢？简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。通过上面的介绍，我们可以看到，url-loader工作分两种情况：1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。

原文链接：https://www.cnblogs.com/weizaiyes/p/7461967.html

关于background url引入图片时

按照上面理论，如果我采用相对路径的方式引入图片的话，webpack会对其require处理。

background: url('./iphonexs.png') 0 0 no-repeat;

实际上确实如此，我看到页面的背景变成：

background: url(/resources/dist/images/iphonexs.a25bee7.png) 0 0 no-repeat;

这是根据url-loader的配置处理的结果。【推荐学习：《vue视频教程》】

或者采用动态style的方式：

<div 
  :style="{&#39;background&#39;: &#39;url(&#39; + require(&#39;./iphonexs.png&#39;) + &#39;) 0 0 no-repeat&#39;}"></div>

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!