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>

　　

它起效。可喜可贺~