vue.js - 获取随机哈希而不是图像 url

Question

这是代码片段。

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

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

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

Answer 1

你已经标记了vue，所以我假设你正在使用vue-cli并通过扩展webpack。

您看到的是图像 URL。它是一个数据 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。