Bagaimana untuk menggantikan imej tempatan dalam Vue

Kaedah Vue untuk menggantikan imej tempatan: 1. Tukar imej kepada format base64 melalui "" 2. Gunakan import untuk memperkenalkan imej; 3. Gunakan keperluan untuk memuatkan secara dinamik; ia dalam Dalam laluan, sudah cukup untuk merealisasikan perubahan dinamik laluan yang diperkenalkan.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi vue3, komputer DELL G3

Cara menggantikan imej tempatan dengan Vue?

vue memuatkan imej tempatan secara dinamik

Hari ini saya menghadapi masalah untuk memperkenalkan imej tempatan ke dalam fail vue, jadi saya menghasilkan artikel ini.

Biasanya, salah satu teg img kami ditulis seperti ini dalam HTML:

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

Cara penulisan ini hanya boleh merujuk imej di bawah laluan relatif . Laluan mutlak tidak boleh digunakan. Jika anda menggunakan laluan mutlak, sumber tersebut akan disalin terus tanpa diproses oleh webpack.

Jika src ialah pembolehubah, kami biasanya menetapkan pembolehubah src dalam data untuk pengikatan dinamik.

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

Walau bagaimanapun, pada masa ini, anda akan mendapati bahawa imej belum dimuatkan dan imej tidak dipaparkan dengan menyemak, didapati bahawa alamat imej ini memaparkan ../images/demo.png, iaitu Dikatakan bahawa laluan relatif yang terikat melalui v-bind tidak akan diproses oleh file-loader webpack, dan hanya akan menjalani penggantian teks ringkas.

Apa yang perlu kita lakukan?

Penyelesaian

1 Tukar imej kepada **base64** format

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

Ini biasanya boleh dilakukan dengan gambar yang agak kecil, seperti ikon, dsb. Saiz biasanya dalam lingkungan 10KB.

2 Gunakan **import** untuk memperkenalkan gambar

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

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

3. . Gunakan **require** untuk memuatkan secara dinamik

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

4. Perkenalkan **publicPath ** dan sambungkannya ke laluan untuk merealisasikan perubahan dinamik laluan yang diperkenalkan

<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>

Konfigurasikan laluan vue.config.js dalam publicPath:

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

结论

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

• 在 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>

Atas ialah kandungan terperinci Bagaimana untuk menggantikan imej tempatan dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!