Vue替換本地圖片的方法：1、通過“”將圖片轉(zhuǎn)為base64格式；2、使用import引入圖片；3、使用require動態(tài)加載；4、引入“publicPath”并且將其拼接在路徑中，實(shí)現(xiàn)引入路徑的動態(tài)變動即可。

本教程操作環(huán)境：Windows10系統(tǒng)、vue3版、DELL G3電腦

Vue怎么替換本地圖片？

vue動態(tài)加載本地圖片

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

通常，我們的一個img標(biāo)簽在html中是這么寫的：

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

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

如果src是變量的話，我們一般會在data中定一個變量src進(jìn)行動態(tài)綁定。

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

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

那怎么辦呢？

解決方法

1、將圖片轉(zhuǎn)**base64**格式

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

一般圖片比較小的可以這么做，比如圖標(biāo)icon等，大小一般在10KB以內(nèi)的。

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

<img :src="src">//使用import引入 import img from '../images/demo.png'  //data中定義變量src data() {   return {     src: img    } }

3、使用**require**動態(tài)加載

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

4、引入**publicPath**并且將其拼接在路徑中，實(shí)現(xiàn)引入路徑的動態(tài)變動

<img :src="publicPath + 'images/demo.jpg'" alt=""> // √ // 編譯后:<img src="/foo/images/demo.jpg" alt=""><script>export default:{     data(){         return {           publicPath: process.env.BASE_URL,         }     },}</script>

在vue.config.js中配置publicPath路徑：

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

結(jié)論

靜態(tài)資源可以通過兩種方式進(jìn)行處理：

• 在 JavaScript 被導(dǎo)入或在 template/CSS 中通過相對路徑被引用。這類引用會被 webpack 處理。
• 放置在 public 目錄下或通過絕對路徑被引用。這類資源將會直接被拷貝，而不會經(jīng)過 webpack 的處理。

原理

從相對路徑導(dǎo)入

當(dāng)你在 JavaScript、CSS 或 *.vue 文件中使用相對路徑 (必須以 . 開頭) 引用一個靜態(tài)資源時，該資源將會被包含進(jìn)入 webpack 的依賴圖中。

在其編譯過程中，所有諸如 <img src="...">、background: url(...) 和 CSS @import 的資源 URL 都會被解析為一個模塊依賴。

用絕對路徑引入時，路徑讀取的是public文件夾中的資源，任何放置在 public 文件夾的靜態(tài)資源都會被簡單的復(fù)制到編譯后的目錄中，而不經(jīng)過 webpack特殊處理。

當(dāng)你的應(yīng)用被部署在一個域名的根路徑上時，比如http://www.abc.com/，此時這種引入方式可以正常顯示但是如果你的應(yīng)用沒有部署在域名的根部，那么你需要為你的 URL 配置 publicPath 前綴，publicPath 是部署應(yīng)用包時的基本 URL，需要在 vue.config.js 中進(jìn)行配置。

擴(kuò)展

關(guān)于vue file-loader vs url-loader

如果我們希望在頁面引入圖片（包括img的src和background的url）。當(dāng)我們基于webpack進(jìn)行開發(fā)時，引入圖片會遇到一些問題。

其中一個就是引用路徑的問題。拿background樣式用url引入背景圖來說，我們都知道，webpack最終會將各個模塊打包成一個文件，因此我們樣式中的url路徑是相對入口html頁面的，而不是相對于原始css文件所在的路徑的。這就會導(dǎo)致圖片引入失敗。這個問題是用file-loader解決的，file-loader可以解析項(xiàng)目中的url引入（不僅限于css），根據(jù)我們的配置，將圖片拷貝到相應(yīng)的路徑，再根據(jù)我們的配置，修改打包后文件引用路徑，使之指向正確的文件。
另外，如果圖片較多，會發(fā)很多http請求，會降低頁面性能。這個問題可以通過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個文件就能訪問圖片了。當(dāng)然，如果圖片較大，編碼會消耗性能。因此url-loader提供了一個limit參數(shù)，小于limit字節(jié)的文件會被轉(zhuǎn)為DataURl，大于limit的還會使用file-loader進(jìn)行copy。

url-loader和file-loader是什么關(guān)系呢？簡答地說，url-loader封裝了file-loader。url-loader不依賴于file-loader，即使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因?yàn)閡rl-loader內(nèi)置了file-loader。通過上面的介紹，我們可以看到，url-loader工作分兩種情況：1.文件大小小于limit參數(shù)，url-loader將會把文件轉(zhuǎn)為DataURL；2.文件大小大于limit，url-loader會調(diào)用file-loader進(jìn)行處理，參數(shù)也會直接傳給file-loader。因此我們只需要安裝url-loader即可。

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

關(guān)于background url引入圖片時

按照上面理論，如果我采用相對路徑的方式引入圖片的話，webpack會對其require處理。

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

實(shí)際上確實(shí)如此，我看到頁面的背景變成：

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

這是根據(jù)url-loader的配置處理的結(jié)果?！就扑]學(xué)習(xí)：《vue視頻教程》】

或者采用動態(tài)style的方式：

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