获取随机散列而不是图像网址

Question

这是代码段。

<img :src="./assets/img/stylechip-icon.png" alt="icon">

当我检查元素时，我得到了这个random hash。

为什么我得到这个random hash以及如何解决？

Answer 1

您已经标记了vue，所以我假设您正在使用vue-cli，扩展名为webpack。

您看到的是图像网址。这是Data URL。

vue-cli创建的项目模板包括url-loader和/或img-loader，它们提取源代码中引用的资源，并在每次构建时将base64编码为数据URL。这样，您可以在运行Web应用程序时保存网络请求。

如果要禁用此功能，请在Webpack配置文件中查找与您的文件匹配的规则。在vue-cli模板中，很可能在/build/webpack.base.conf.js中，并且删除规则应类似于：

module.exports = {
  module: {
    rules: [{
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    }]
  }
}

Answer 2

vue将您的图像转换为base64。