url-loader對v-bind:src不起效
阿新 • • 發佈:2020-08-19
為了解決每次打包後,訪問網頁圖片沒有及時更新,仍然是使用快取的圖。特意再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>
它起效。可喜可賀~