时间戳

首页 > 解决方案 > 如何在 React JS 中加载 SVG 列表

reactjs - 如何在 React JS 中加载 SVG 列表

问题描述

我将 SVG 列表存储在一个数组中。但由于某种原因，他们不渲染。也没有错误。我尝试了大多数解决方案，但没有一个对我有用。有什么解决办法吗？

我的 SVG 对象：

在我的数据文件中：

const userList = [
  {
    miniLogo: `${require("../assets/logo/jim.svg")}`,
    name: "Jim",
    id: "0",
  {
    miniLogo: `${require("../assets/logo/Dana.svg")}`,
    name: "Dana",
    id: "1",
  }
];

export default userList;

然后在我的组件中的某个地方：

import users from "../../constants/users.map";

//Other Render Stuff
         <div>
          <Slider {...settings}>
            {users.map((user, index) => {
              return (
                <div
                  key={index}
                  style={{
                    background: "#FFFFFF",
                    boxShadow: "0px 20px 50px #EEF0F4",
                    borderRadius: "32px"
                  }}
                >
                  <img src={user.miniLogo} />
                </div>
              );
            })}
          </Slider>
        </div>

我的 Webpack 配置：

  {
    test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
    use: "file-loader"
  },
  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    use: [
      "file-loader?name=images/[name].[ext]",
      "image-webpack-loader?bypassOnDebug"
    ]
  },
  {
    test: /\.svg$/,
    loader: "svg-inline-loader"
  },

更新

我按照以下答案中的建议从 miniLogo 中删除了字符串文字。但它仍然没有渲染。这就是我所看到的。

SVG 不渲染

渲染后我的 img 标签：

图片标签

标签： reactjssvg

解决方案

我认为这是因为线 miniLogo: `${require("../assets/logo/jim.svg")}`

它将 svg 语法作为字符串导入。所以img部分变成了：

<img src="<svg>...</svg>" />

也许您可以尝试删除字符串文字：

const userList = [
    miniLogo: require("../assets/logo/jim.svg"),
    name: "Jim",
    id: "0",
  {
    miniLogo: require("../assets/logo/Dana.svg"),
    name: "Dana",
    id: "1",
  }
];

更新：

你好，图片路径不包含image/，所以导致404问题。我检查了您的webpack config，并猜测那是因为svg它对应于第一个加载程序设置（带有ttf和eot类型）。

请仅对一种文件类型使用一种加载器设置，否则可能会导致此类问题。

因此，svg从第一个加载器中删除类型：

{
    test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
    use: "file-loader"
  },
  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    use: [
      "file-loader?name=images/[name].[ext]",
      "image-webpack-loader?bypassOnDebug"
    ]
  }

或者

如果你想内联加载它：

{
    test: /\.(ttf|eot)(\?[\s\S]+)?$/,
    use: "file-loader"
  },
  {
    test: /\.(jpe?g|png|gif)$/i,
    use: [
      "file-loader?name=images/[name].[ext]",
      "image-webpack-loader?bypassOnDebug"
    ]
  },
  {
    test: /\.svg$/,
    loader: "svg-inline-loader"
  },

推荐阅读