如何在React中将图像文件夹添加到渲染数组的组件 [英] How to add the image folders to component that render an array in React

问题描述

我在这里问了一个问题如何加入在React 中包含文件夹图像的数组，但没有得到任何帮助. 所以我试图改变逻辑，不幸的是没用. 我有一个数组的父组件.此子组件应呈现该数组，并以某种方式从本地文件夹中显示图像.文件夹名称等于project.image.

I asked a question here How to join an array with folder images in React, but didn't get any help. So I was trying to change the logic, unfortunately useless. I have Parent component with an array. This child component should render that array and somehow images from local folder. Folder name equal 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编码，所以它不是解决方案)

// attempt 1 (this works fine, but it's hurdcoded ... so it's not a solution )

 {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 (...).上下文不是函数")，因为传递给require.context的参数必须是文字！)

// attempt 2 (Here project.image equal folder1 (folder name), but here I get error "TypeError: webpack_require(...).context is not a function", because the arguments passed to require.context must be literals!)

{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>

我甚至试图使其像变量一样

I tried even to make it like a variable

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

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

but got the same response as was in the second attempt. Any help will be appreciated.

推荐答案

不幸的是，我没有得到任何答案.因此，我已经使用开关和其他组件解决了该问题.

Unfortunately, I didn't get any answers to my question. So I've solved it using switch and extra component.

图片组件

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>
    )
  }
}

添加带有道具图片"的内容等于文件夹名称"的名称子组件内部

Add put it with props "image" that equal to "folder name" inside Child component

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

希望它会对其他人有所帮助.

Hope it will help someone else.

这篇关于如何在React中将图像文件夹添加到渲染数组的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！