我有一个组件,它带有一个: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';
但这似乎不起作用(这是问题的一部分,而不是答案),而且答案有点不太明确,无法回答我要问的问题。
我也找到了这个问题,但还是有一个答案(尽管未经批准),它的问题多于它的答案。因此,在安装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> )
但是,正如该问题的操作要问的那样,即使将整个图像文件夹复制到构建文件夹后,页面也找不到我的svg。我也尝试过“ ./images/”
我觉得我只是在丢失最后一条关键信息,在搜索了过去的一天之后,我希望有人能够识别出我所缺少的信息。
如果使用React,我强烈怀疑您也在使用Webpack。您可以使用require.context而不是es6,import并且Webpack会在构建时为您解决。
require.context
import
require.context ( folder, recurse, pattern ) folder-字符串-开始扫描文件的文件夹路径。 recurse-布尔值-是否递归扫描文件夹。 pattern-RegExp-匹配模式,描述要包括的文件。
require.context ( folder, recurse, pattern )
每个示例的第一行…
const reqSvgs = require.context ( './images', true, /\.svg$/ )
…创建一个Require Context *.svg,将images文件夹中的所有文件路径映射到导入。这为我们提供了一个专门的Require Function,reqSvgs并带有一些附加属性。
*.svg
images
reqSvgs
方法的属性之一reqSvgs是keys方法,它返回所有有效文件路径的列表。
keys
const allSvgFilepaths = reqSvgs.keys ()
我们可以将这些文件路径之一传递reqSvgs给导入的图像。
const imagePath = allSvgFilePaths[0] const image = reqSvgs ( imagePath )
对于这个用例,此api具有约束力且不直观,因此我建议将集合转换为更常见的JavaScript数据结构,以使其更易于使用。
转换期间将导入每个图像。 注意,因为这可能是步枪。但是它提供了一种相当简单的机制,用于将多个文件复制到build文件夹,其余的源代码可能永远不会明确引用该文件。
这是3个可能有用的示例转换。
创建一个导入文件的数组。
const reqSvgs = require.context ( './images', true, /\.svg$/ ) const paths = reqSvgs.keys () const svgs = paths.map( path => reqSvgs ( path ) )
创建一个对象数组,每个对象{ path, file }用于一个图像。
{ path, file }
const reqSvgs = require.context ( './images', true, /\.svg$/ ) const svgs = reqSvgs .keys () .map ( path => ({ path, file: reqSvgs ( 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动态加载示例。