使用 webpack 加载 react 图像答案

【问题标题】：Using webpack to load react images使用 webpack 加载 react 图像
【发布时间】：2018-07-03 08:25:48
【问题描述】：

部署到服务器时，我在加载图像时遇到问题。我不知道原因，但是当 npm 渲染图像时，只有很少的工作。

我分析了一下：

如果，当我检查代码语法时，图像加载良好，它是 (data:image/svg+xml(...)) 的路径。 advantage_first 和 advantage_second 相似。

导入时：

import adv1 from './img/advantage_first.svg'
import adv2 from './img/advantage_second.svg'

并且在渲染时：

        <img src={adv1} />
        <img src={adv2} />

这是加载图片的部分webpack.config.js

  {
    test: /\.(png|jpg|svg|ttf|otf|pdf|ico)$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'url-loader?name=/images/[name].[ext]&limit=8192'
  }

我应该在哪里找到问题？

祝你有美好的一天

【问题讨论】：

尝试将图片加载器（url-loader）的限制从8192增加到10000。

标签： reactjs image npm webpack

【解决方案1】：

你可以试试

 { test: /\.(png|jpg|svg|ttf|otf|pdf|ico)$/, loader: 'url-loader?limit=1024000' }

【讨论】：

没有解决问题。
我用 102400 上传到服务器。现在我遇到了内存不足的问题。它取决于服务器或其他东西？
1024000 是一个数字，指定文件的最大大小（以字节为单位）。如果文件大于限制，默认使用file-loader并将所有查询参数传递给它。
如果这个数字太大并且你导入的文件很大，那么文件包会很大并且页面加载很慢
当我使用 102400 时，我得到关于分配和内存的错误。