vue動(dòng)態(tài)加載本地圖片的處理方法

發(fā)現問(wèn)題

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

通常，我們的一個(gè)img標簽在html中是這么寫(xiě)的：

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

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

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

<img :src="src">

//data中定義變量src
data() {
  return {
    src: '../images/demo.png' 
  }
}

然而這時(shí)候，會(huì )發(fā)現這個(gè)時(shí)候圖片并沒(méi)有被加載出來(lái)，圖片沒(méi)有顯示出來(lái)，通過(guò)查看發(fā)現這張圖片的地址顯示 ../images/demo.png ，也就是說(shuō)通過(guò)v-bind形式綁定的相對路徑不會(huì )被webpack的file-loader處理，只會(huì )做簡(jiǎn)單的文本替換。

那怎么辦呢？

解決方法

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

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

一般圖片比較小的可以這么做，比如圖標icon等，大小一般在10KB以?xún)鹊摹?/p>

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

<img :src="src">

//使用import引入
import img from '../images/demo.png'

//data中定義變量src
data() {
  return {
    src: img 
  }
}

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

<img :src="src">

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

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

<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.js
module.exports = {
    publicPath:'/foo/',
    ...
}

結論

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

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

原理

從相對路徑導入

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

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

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

當你的應用被部署在一個(gè)域名的根路徑上時(shí)，比如，此時(shí)這種引入方式可以正常顯示但是如果你的應用沒(méi)有部署在域名的根部，那么你需要為你的 URL 配置 publicPath 前綴，publicPath 是部署應用包時(shí)的基本 URL，需要在 vue.config.js 中進(jìn)行配置。

擴展

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

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

其中一個(gè)就是引用路徑的問(wèn)題。拿background樣式用url引入背景圖來(lái)說(shuō)，我們都知道，webpack最終會(huì )將各個(gè)模塊打包成一個(gè)文件，因此我們樣式中的url路徑是相對入口html頁(yè)面的，而不是相對于原始css文件所在的路徑的。這就會(huì )導致圖片引入失敗。這個(gè)問(wèn)題是用file-loader解決的，file-loader可以解析項目中的url引入（不僅限于css），根據我們的配置，將圖片拷貝到相應的路徑，再根據我們的配置，修改打包后文件引用路徑，使之指向正確的文件。

另外，如果圖片較多，會(huì )發(fā)很多http請求，會(huì )降低頁(yè)面性能。這個(gè)問(wèn)題可以通過(guò)url-loader解決。url-loader會(huì )將引入的圖片編碼，生成dataURl。相當于把圖片數據翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個(gè)文件就能訪(fǎng)問(wèn)圖片了。當然，如果圖片較大，編碼會(huì )消耗性能。因此url-loader提供了一個(gè)limit參數，小于limit字節的文件會(huì )被轉為DataURl，大于limit的還會(huì )使用file-loader進(jìn)行copy。

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

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

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

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

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

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

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

這是根據url-loader的配置處理的結果。

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

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

Reference

…

…

總結

到此這篇關(guān)于vue動(dòng)態(tài)加載本地圖片的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)加載本地圖片內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！