动态载入图片URL

我有一个组件接受一个：itemname并输出一个包含图像的html包。每个包的图像都不同。
以下是我所拥有的：

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

import SVGInline from "react-svg-inline";

export default (props) => (
  <NavLink className="hex" activeClassName="active" to={'/hex/' + props.itemName}> {React.createElement(SVGInline, {svg: props.itemName})} </NavLink>
)

我怎样才能使这个组件工作？
我知道如果我只是显式地导入我的所有图像，我可以这样称呼我的图像…

import SVGInline from "react-svg-inline";
import SASSSVG from "./images/sass.svg";

<NavLink className="hex" activeClassName="active" to="/hex/sass"><SVGInline svg={ SASSSVG } /></NavLink>

这是可行的，但是因为我需要包含大约60个svg，所以它添加了很多多余的代码。
另外，我发现这个代码…

import * as IconID from './icons';

但这似乎不起作用（这是问题的一部分，而不是答案），答案是有点太不具体回答我提出的问题。
我也发现了in this question但同样有一个答案（尽管未经批准）包含的问题比它的答案多。所以，在安装了react svg之后，我设置了一个测试，看看答案是否像这样工作……

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { NavLink } from 'react-router-dom';
import ReactSVG from 'react-svg'

export default (props) => (
  <NavLink className="hex" activeClassName="active" to={'/hex/' + props.itemName}>
    <ReactSVG
      path={"images/" + props.itemName + ".svg"}
      callback={svg => console.log(svg)}
      className="example"
    />
  </NavLink>
)

但是，正如那个问题的OP问的那样，即使在把我的整个图像文件夹复制到我的构建文件夹之后，页面也找不到我的SVG。我也试过“…/images/”
我觉得我只是错过了最后一个关键的信息，在搜索过去的一天，我希望有人能识别出我丢失的那块。

最佳答案

如果使用react，我强烈怀疑您也在使用webpack。您可以使用require.context而不是es6import，webpack将在构建时为您解析它。

require.context ( folder, recurse, pattern )

folder-string-开始扫描文件的文件夹路径。
递归-布尔-是否递归扫描文件夹。
模式-regexp-描述要包含哪些文件的匹配模式。
每个例子的第一行…

const reqSvgs = require.context ( './images', true, /\.svg$/ )

…创建将*.svg文件夹中的所有images文件路径映射到导入的必需上下文。这给了我们一个特殊的require函数，名为reqSvgs，带有一些附加属性。
reqSvgs的属性之一是keys方法，它返回所有有效文件路径的列表。

const allSvgFilepaths = reqSvgs.keys ()

我们可以将其中一个文件路径传递到reqSvgs以获取导入的图像。

const imagePath = allSvgFilePaths[0]
const image = reqSvgs ( imagePath )

这个api对于这个用例是约束的和非约束的，因此我建议将集合转换为更常见的javascript数据结构，以使其更易于使用。
转换期间将导入每个图像。小心，因为这可能是一把脚枪。但是它提供了一种相当简单的机制，可以将多个文件复制到构建文件夹中，而这些文件夹可能永远不会被其他源代码显式引用。
下面是3个可能有用的转换示例。
数组
创建导入文件的数组。

const reqSvgs = require.context ( './images', true, /\.svg$/ )
const paths = reqSvgs.keys ()

const svgs = paths.map( path => reqSvgs ( path ) )

对象数组
创建一个对象数组，每个对象对一个图像{ path, file }。

const reqSvgs = require.context ( './images', true, /\.svg$/ )

const svgs = reqSvgs
  .keys ()
  .map ( path => { path, file: svg ( path ) } )

平面物体
创建一个对象，其中每个路径都是其匹配文件的键。

const reqSvgs = require.context ('./images', true, /\.svg$/ )

const svgs = reqSvgs
  .keys ()
  .reduce ( ( images, path ) => {
    images[path] = reqSvgs ( path )
    return images
  }, {} )

survivejs在这里给出了一个更通用的require.context示例SurviveJS Webpack Dynamic Loading。