如何导入 svg 文件并将它们用于图像中的 src答案

【问题标题】：How to import svg files and use them for src in image如何导入 svg 文件并将它们用于图像中的 src
【发布时间】：2019-03-07 05:55:01
【问题描述】：

我遇到了一个似乎无法解决的问题。

我有一个 svg 文件需要包含在我的项目中。由于我已经构建了自己的样板，因此我希望具有与 CRA 相同的功能，因为我可以将 svg 用作图像 src。

即

<img src={svgfile} alt="some file" />

我需要做什么才能拥有该功能？
我尝试使用文件加载器让它工作，但它会引发错误。

{
    test: /\.(png|jpg|gif|svg)$/,
    use: [
      {
        loader: "file-loader",
        options: {}
      }
    ]
  },

任何帮助将不胜感激。

webpack 文件

{
  entry: "./src/browser/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js",
    publicPath: "/"
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: "babel-loader" },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {}
          }
        ]
      },
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      __isBrowser__: "true"
    })
  ]
}

【问题讨论】：

可以给你webpack.config.js的样本吗？
@JunedLanja 添加了
webpack.config.js 看起来不错。你遇到了什么错误？
你在运行webpack命令来创建bundle.js
这是我用来创建bundle.js 文件的命令。 webpack -w & nodemon server.js

标签： reactjs webpack webpack-file-loader

【解决方案1】：

喜欢

 import svgfile from “./path/fileName.svg”;

 <img src={svgfile} alt="some file" />

或者

<img src={require(“./path/fileName.svg”} alt="some file" />

请原谅我在手机上回答的双引号

【讨论】：

只有在 @Strahinja Ajvaz 已经正确配置了 webpack 时才会起作用
@JunedLanja 它正确渲染所有其他加载器，将 jsx 转换为 js 并将 es6 转换为 es5。这是唯一给我带来麻烦的。
@StrahinjaAjvaz 请支持并接受您选择的答案，无论哪个答案解决了您的问题。以便对未来的读者有所帮助

【解决方案2】：

你可以试试这样的：

test: /\.(?:png|jpg|gif|svg)$/i,
use: [
  {
    loader: 'file-loader',
    options: {
      name: 'assets/[hash].[ext]',
    }
  },
]

assets 是构建后存储导入文件的目录。

【讨论】：