[英]unable to get an array of svg files from public folder to component in React js
here i am having some 20 svg file's in the images folder 在这里,我在images文件夹中有一些20 svg文件
public
|-images
-| 20 svg files
how ever i am able to retrieve only 1 image that to if set the images src folder 如果设置图像src文件夹,我如何只能检索到1张图像
import React from 'react';
import svg from "../src/images/image1.svg"
class App extends React.Component{
render(){
return(
<div>
<img src={svg} alt="info"></img>
</div>
)
}
}
export default App;
so here how can i retrieve an array of images from public folder can use in component 所以在这里我如何从公用文件夹中检索图像数组,以在组件中使用
update : 更新:
say my folder structure is like 说我的文件夹结构像
public
|- images
|-50 images
src
|- component1
|- component 2
|- component2.js
if i am calling in component2.js
importAll(r) {
return r.keys().map(r);
}
componentWillMount() {
images = this.importAll(require.context('/public/same-size/', false, /\.(png|jpe?g|svg)$/));
}
render(){
return(
<div>
{images.map((image, index) => <img key={index} src={image} alt="info"></img>)}
</div>
)
}
then i am getting error module not found 然后我得到错误模块未找到
I think you can go about it this way: 我认为您可以这样处理:
import React from 'react';
var images = [];
class App extends React.Component{
function importAll(r) {
return r.keys().map(r);
}
componentWillMount() {
images = this.importAll(require.context('./../../images/', false, /\.(png|jpe?g|svg)$/));
}
render(){
return(
<div>
{images.map((image, index) => <img key={index} src={image} alt="info"></img>)}
</div>
)
}
}
export default App;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.