Vue怎麼替換本地圖片

Vue取代本機圖片的方法：1、透過「」將圖片轉為base64格式；2、使用import引入圖片；3、使用require動態載入；4、引入「publicPath」並且將其拼接在路徑中，實現引入路徑的動態變動即可。

本教學操作環境：Windows10系統、vue3版、DELL G3電腦

Vue怎麼取代本機圖片？

vue動態載入本地圖片

今天遇到一個在vue檔案中引入本地圖片的問題，於是有了這篇文章。

通常，我們的一個img標籤在html中是這麼寫的：

<img  src="/static/imghwm/default1.png" data-src="../images/demo.png" class="lazy" alt="Vue怎麼替換本地圖片" >

這種寫法只能引用相對路徑下的圖片。不能使用絕對路徑。使用絕對路徑的話，這類資源將會直接被拷貝，而不會經過 webpack 的處理。

如果src是變數的話，我們一般會在data中定一個變數src進行動態綁定。

<img  src="/static/imghwm/default1.png" data-src="src" class="lazy" alt="Vue怎麼替換本地圖片" >//data中定义变量src
data() {
  return {
    src: '../images/demo.png' 
  }
}

然而這時候，會發現這個時候圖片並沒有被加載出來，圖片沒有顯示出來，透過查看發現這張圖片的地址顯示../images/ demo.png ，也就是說透過v-bind形式綁定的相對路徑不會被webpack的file-loader處理，只會做簡單的文字替換。

那怎麼辦呢？

解決方法

1、將圖片轉**base64**格式

<img  src="/static/imghwm/default1.png" data-src="data:image/png;base64,iVBYKIGloxxxxxxxxxxxxxxxxxxx..." class="lazy" alt="Vue怎麼替換本地圖片" >

一般圖片比較小的可以這麼做，例如圖示icon等，大小一般在10KB以內的。

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

<img  src="/static/imghwm/default1.png" data-src="src" class="lazy" alt="Vue怎麼替換本地圖片" >//使用import引入
import img from '../images/demo.png'

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

3.使用**require**動態載入

#

<img  src="/static/imghwm/default1.png" data-src="src" class="lazy" alt="Vue怎麼替換本地圖片" >//data中定义变量src
data() {
  return {
    src: require('../images/demo.png')
  }
}

4、引入**publicPath**並且將其拼接在路徑中，實現引入路徑的動態變動

#

<img  src="/static/imghwm/default1.png" data-src="publicPath + 'images/demo.jpg'" class="lazy" alt="Vue怎麼替換本地圖片" > // √
// 编译后:<img  src="/static/imghwm/default1.png" data-src="/foo/images/demo.jpg" class="lazy" alt="Vue怎麼替換本地圖片" ><script>export default:{
    data(){
        return {
          publicPath: process.env.BASE_URL,
        }
    },}</script>

在vue.config.js 中設定publicPath路徑：

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

结论

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

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

原理

从相对路径导入

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

在其编译过程中，所有诸如 <img src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="Vue怎麼替換本地圖片" >、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></div>

以上是Vue怎麼替換本地圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！