So ersetzen Sie lokale Bilder in Vue

Vue-Methode zum Ersetzen lokaler Bilder: 1. Konvertieren Sie das Bild über „“ in das Base64-Format. 3. Verwenden Sie „require“, um es dynamisch zu laden. 4. Führen Sie „publicPath“ ein und fügen Sie es in den Pfad ein Um dies zu erreichen, führen Sie einfach dynamische Änderungen in den Pfad ein.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue3-Version, DELL G3-Computer

Wie ersetzt man lokale Bilder durch Vue?

vue lädt lokale Bilder dynamisch

Heute bin ich auf ein Problem beim Einfügen lokaler Bilder in die Vue-Datei gestoßen, deshalb habe ich diesen Artikel verfasst.

Normalerweise wird eines unserer IMG-Tags in HTML so geschrieben:

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

Diese Schreibweise kann nur Bilder unter relativen Pfaden referenzieren. Absolute Pfade können nicht verwendet werden. Wenn Sie einen absoluten Pfad verwenden, werden solche Ressourcen direkt kopiert, ohne dass sie vom Webpack verarbeitet werden.

Wenn src eine Variable ist, legen wir normalerweise eine Variable src in den Daten für die dynamische Bindung fest.

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

Zu diesem Zeitpunkt werden Sie jedoch feststellen, dass das Bild nicht geladen wurde und nicht angezeigt wird. Bei der Überprüfung wird festgestellt, dass die Adresse dieses Bildes ../images/demo lautet .png Das heißt, der durch v-bind gebundene relative Pfad wird nicht vom Dateilader des Webpacks verarbeitet und nur einer einfachen Textersetzung unterzogen. ../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

Was sollen wir tun?

Lösung

1. Konvertieren Sie das Bild in

**base64**🎜Format🎜🎜🎜

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

🎜

Dies ist für im Allgemeinen kleine Bilder wie Symbole usw. möglich und die Größe liegt im Allgemeinen innerhalb von 10 KB. 🎜

🎜2. Verwenden Sie 🎜**import** 🎜Bilder einführen🎜🎜🎜

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

🎜

🎜3 🎜**require**🎜Dynamisches Laden🎜🎜🎜

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

🎜

🎜4. Führen Sie 🎜**publicPath**🎜und ein Fügen Sie es in den Pfad ein, um dynamische Änderungen im eingeführten Pfad zu erzielen🎜🎜🎜

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

🎜

Konfigurieren Sie publicPathin vue.config.js > Pfad: 🎜🎜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>

Das obige ist der detaillierte Inhalt vonSo ersetzen Sie lokale Bilder in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!