1. 程式人生 > 實用技巧 >url-loader對v-bind:src不起效

url-loader對v-bind:src不起效

為了解決每次打包後,訪問網頁圖片沒有及時更新,仍然是使用快取的圖。特意再vue.config.js配置url-loader,打包後給圖片加上hash,

{
  loader: 'url-loader',
    options: {
      limit: 4096,
      name: './static/images/[name].[hash:8].[ext]'
   }
}
結果很奇怪,有部分靜態資源起效的,一部分不起效。
多次對比起效的圖片與未起效的圖片,排除大小型別因素。
初步發現url-loader對 ‘/’開頭的路徑全部不起效。於是,我將所有的‘/’開頭的靜態資源路徑改用的相對路徑
‘./’、 ‘../...’這種,然後再打包。
神奇是事情發現的,生成的帶hash的圖片增多了,哈哈哈。
但是,很快我又發現個問題,圖片數量不對,有點少。哭唧唧~
我開始反覆修改url-loader的配置,但都沒用。
我開始去詢問別人,都沒找到原因。
然後我看看對比起效的圖片引用程式碼,和不起效的引用程式碼。
哈哈哈,終於找到了。
v-bind:src的引用,圖片都不起效。
問題原因找到了就好解決啦。
我在網上搜索一下有關url-loader貼,(具體那條貼當時沒儲存連結,後來再找沒找到,先在這裡表示我的無盡感激,感謝廣大網頁的分享!!!)
var src = '../static/hello.jpg'
var image = new Image()
image.src = src // url-loader對這條不起效哦
image.src = require(src) // url-loader對這條不起效哦

var src1 = 'hello.jpg'
image.src = require('../static/' + src1 )
//神奇的是 url-loader對這條起效,哈哈哈

  於是我引用了。

<image :src="require('../../../static/img/'+img)" mode="widthFix"></image>

  它起效。可喜可賀~