如何将图像文件夹添加到在 React 中呈现数组的组件答案

【问题标题】：How to add the image folders to component that render an array in React如何将图像文件夹添加到在 React 中呈现数组的组件
【发布时间】：2020-08-10 19:10:41
【问题描述】：

我在这里问了一个问题How to join an array with folder images in React，但没有得到任何帮助。所以我试图改变逻辑，不幸的是没用。我有一个带有数组的父组件。这个子组件应该渲染该数组和本地文件夹中的图像。文件夹名称等于 project.image。

子组件

export default class Child extends Component {
  render() {

  const { project } = this.props;
  
  function importAll(r) {
    return r.keys().map(r);
  }
  
  const folder1 = importAll(require.context('../../assets/images/folder1',false,/\.(png|jpe?g|svg)$/));
  const folder2 = importAll(require.context('../../assets/images/folder2',false,/\.(png|jpe?g|svg)$/));
    return (
      <div className="portfolio-item">
         <div className="desc">  
          <div className="item-name">
            <p>{project.name}</p>
          </div>
        <div className="image-block">
         <div className="item-images">
            <Carousel showArrows={true} showThumbs={false} >

// 尝试 1（这工作正常，但它是 hurdcoded ......所以它不是一个解决方案）

 {project.image === 'folder1' ? folder1.map((image, index) => {
   return (
    <div className="image-block-small" key={index}>
      <div>
       <img src={image} alt=""/>
      </div>
     </div>
      )})
     : null} 
  </Carousel>         
 </div>

// 尝试 2（此处 project.image 等于 folder1（文件夹名称），但此处出现错误“TypeError: webpack_require(...).context is not a function”，因为传递给 require.context 的参数必须是文字！）

{importAll(require.context('../../assets/images/' + project.image, false, /\.(png|jpe?g|svg)$/)).map((image, index) => {
     return (
       <div className="image-block-small" key={index}>
          <div>
            <img src={image} alt=""/>
           </div>
        </div>
      )})
    : null} 
  </Carousel>         
 </div>

我什至试着把它变成一个变量

const folder1 = '../../assets/images/folder1';
{importAll(require.context(folder1, false, /\.(png|jpe?g|svg)$/)).map((image, index) => { ... }

但得到了与第二次尝试相同的响应。任何帮助将不胜感激。

【问题讨论】：

标签： reactjs image webpack

【解决方案1】：

很遗憾，我的问题没有得到任何答案。所以我使用 switch 和额外的组件解决了它。

图片组件

function importAll(r) {
  return r.keys().map(r);
}

const folder1 = importAll(require.context('../../assets/images/folder1', false, /\.(png|jpe?g|svg)$/));
const folder2 = importAll(require.context('../../assets/images/folder2', false, /\.(png|jpe?g|svg)$/));
const folder3 = importAll(require.context('../../assets/images/folder3', false, /\.(png|jpe?g|svg)$/));

export default class Images extends Component {
  selectFolder(param) {
    switch(param) {
      case 'folder1':
        return folder1;
      case 'folder2':
        return folder2;
      // etc ....
      default:
        return folder3 ;
    }
  }

  render() {
    return (
      <div className="item-images">
        <Carousel showArrows={true} showThumbs={false} >
          {this.selectFolder(this.props.param).map((image, index) => {
            return (
              <div className="image-block-small" key={index}>
                <img src={image} alt=""/>
              </div>
              )
            })
          } 
        </Carousel>         
      </div>
    )
  }
}

在子组件中添加等于“文件夹名称”的道具“图像”

<div className="image-block">
  <ProjectImages param={project.image}/>
</div>

希望对其他人有所帮助。

【讨论】：