首页 > 解决方案 > 为什么 webpack 在 base64 中转换 require('path to img.png')?

问题描述

我有一个聊天记录和一个存储所有历史记录的 JSON 文件。所有图像/视频/音频链接都需要('媒体路径')。

但是,由于某种原因,当使用 vue-cli-service serve 或 vue-cli-service build 时,webpack 会跳过我用于 Emoji 的图像,而不是将其包含在 dist 文件夹中,而是将其转换为 base64 字符串。

JSON 看起来像这样:

          { type: 'emoji', author: `me`, data: { src: require('../../Media/img/smiling-face.png') } },
          { type: 'text', author: `me`, data: { text: `Do you read me...`, meta: '✓✓ Read' } },
          { type: 'image', author: `support`, data: { src: require('../../Media/img/2.gif'), meta: '✓✓ Read' } },
          { type: 'image', author: `me`, data: { src: require('../../Media/img/1.jpg'), meta: '✓✓ Read' } },

我的 Emoji 类型消息由于某种原因被转换为 base64,并且 png 图像不包含在最终构建中。

在浏览器中,我得到以下条目:{author: "support", type: "emoji", data: {src: "data:image/png;base64,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"}}

但它应该看起来像这样:{author: "support", type: "emoji", data: {src: "img/smiling-face.png"}}

这只发生在smileing-face.png上,任何其他图像,包括其他png都正确显示并包含在构建中,所以有人能说什么是错的吗?

链接到图片“smiling-face.png”:https ://mega.nz/#!Ze5UzK7A!MdV23KlEou4ByfOlN0aCBc8N7KAGkvNnwPH1YFiltBE

标签: jsonwebpackbase64pngvue-cli

解决方案


Vue 会将任何低于 10kb 的图像编码为 base64 并内联到您的 JS 包中。

您可以通过将限制设置为 -1 来修改vue.config.js以删除它:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options.limit = -1
        return options
      })
  }
}

推荐阅读