vue動態定義圖片路徑

 當我在html模塊或者css中引入圖片的時候用相對路徑，例：

<div>
     <img src="../../assets/img/policeImg/tt.png">
</div>

　　

  這時候圖片可以正常顯示，但是我想把圖片路徑動態化，所以我會把圖片路徑綁定在data中。

<div>
     <img :src="img">
</div>
<script>
      export default {
           data () {
               return {
                   img: '../../assets/img/policeImg/tt.png'
               }
           }
      }
</script>

 我們會發現圖片顯示不出來。

幾種情況

  第一種情況圖片放在assets文件夾下面，在html模版中直接引入或者在css中引入，如下：

 

WechatIMG4.jpeg

 

 

WechatIMG5.jpeg

我們可以看到不管是在html中引入或在css中引入圖片都會被解析成base64編碼，打包之后dist文件夾中也不會有圖片，而是在壓縮文件中有base64編碼。
  解釋：因為加載一張圖片就需要發送一次http請求，會降低頁面性能，這個問題可以通過url-loader解決。url-loader會將引入的圖片編碼，生成dataURI。相當於把圖片數據翻譯成一串字符，再把這些字符打包到文件當中，最終只需要引入這個文件就可以訪問這個圖片。當然如果圖片較大，編碼會消耗性能，因此url-loader提供了一個limit參數，小於limit字節的文件會被轉為DataURl，大於limit的還會使用file-loader進行copy，一般會放在static文件夾下面。

 

WechatIMG7.jpeg

 

 

WechatIMG8.jpeg

  上面代碼中我們可以看到在css中引入assets文件夾中的圖片，但是編譯或打包之后都顯示這張圖片在static文件夾下面，說明這張圖片大小超過了limit范圍，所以直接被拷貝到static文件夾下。那么url-loader和file-loader有什么關系呢？
  簡單的說，url-loader封裝了file-loader，只需要安裝url-loader即可，不需要安裝file-loader。url-loader工作分兩種情況：1.文件大小小於limit參數，url-loader將會把文件轉為DataURL；2.文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader，file-loader將圖片拷貝到static文件夾下。
   第二種情況圖片放在assets文件夾下面，在js中引入，如下：

 

WechatIMG9.jpeg

 

 

WechatIMG10.jpeg

從上圖我們可以發現如果在js中直接寫，編譯后圖片是無法顯示的，但是如果用require或import就可以正常展示，而且跟在html中或者css中直接引入效果是一樣的。

 

WechatIMG11.jpeg

 

WechatIMG13.jpeg

 

 

WechatIMG12.jpeg

  解釋：使用不同的方式展示圖片，webpack對他們的處理方式也是不同的：使用import或者require或者background都會被webpack的url-loader當做依賴模塊處理，如果是直接寫在js中，因為js是動態的所以webpack是不會處理的，打包后也不會顯示在dist目錄中。
   第三種情況圖片放在static文件夾下面，在html、css、js中直接引入，我們會發現圖片都可以正常展示。

 

1547536132355.jpg

總結：webpack只能處理靜態資源。assets 和 static兩個文件都是靜態的，但是它們是有區別的，static文件夾下面的文件都是不能被webpack處理的，你必須使用絕對路徑來引用這些文件，取決於在config.js里面加入的build.assetsPublicPath 和 build.assetsSubDirectory這兩個屬性設置的。其他地方的文件或圖片都會被webpack解析成模塊依賴，這時候就可以用url-loader和css-loader去處理。如果在js中引用圖片，因為js是動態的所以沒有辦法去處理，但是我可以使用require或import將圖片當成模塊加載進來，就會被webpack當成靜態文件解析，這時候就可以被url-loader處理。

 

2020.05.09補充一個遇到的坑：

最近做項目設置背景圖片的時候發現了這個問題：

或者

然后報錯：

 

后來改為：

 

 就沒有報錯了

為什么第三種情況不會報錯呢？

vue2.5及以下版本以上三種寫法都沒有問題, 2.6就出現這個問題,應該和webpack配置相關 .
vue2.6用的是webapack4.0

 

為什么要這么寫?

~和@又是什么意思呢?

webpack資源處理的規則,分為相對路徑,沒有前綴的路徑；帶~的路徑,相對根目錄的路徑

相對路徑: "./assets/start.png" 
沒有前綴的路徑 "assets/start.png" 被webpack解析為 相對路徑
帶~的路徑  "~@/assets/theme/start.png" 被webpack解析為 require(src/assets/theme/start.png) 動態引入 
 @在webpack 被resolve.alias配置下等價於/src
4 相對根目錄的路徑 "/assets/start.png" webpack不解析

 

參考： https://blog.csdn.net/qq_34767115/article/details/95962738