获取随机哈希而不是图像 url

Question

这是代码 sn-p。

<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。