使用 ReactJS 动态加载本地图片

Question

我正在尝试从一个数组中渲染多个图像，并将其作为属性传递给“图像”组件。但是，无论出于何种原因，我想要渲染的本地图像都没有显示出来。如果我加载托管在网址上的图像，该图像 将 显示出来，表明传递到 Image 组件的“imageSource”属性没有任何问题。我试过像这样使用源格式：

 let source = 'require(./img/' + props.imageSource + ")";

或尝试：

 <img src={{uri: source}} role="presentation" style={style.image} />

……但我所做的一切都没有任何区别。

该组件如下所示。我完全被卡住了，所以帮助将不胜感激！

 import React from 'react';

let Image = function statelessFunctionComponentClass(props) {

  let source = './img/' + props.imageSource;

  const style = {

    image : {

      width: '400pt',
      height: '400pt'
    }
  }

  return (

    <img src={source} role="presentation" style={style.image} />
  )
}

export default Image

原文由 Paul Nylund 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过使用 require.context() 创建新上下文来包含图像文件夹。从那里，您可以从该文件夹动态访问您想要的图像，并将其设置为 src。

脱离这样的结构：

 APP
├──webpack.config.js
├──src
     ├──containers
        ├──YourContainer.js
     ├──components
        ├──YourComponent.js
├──public
     ├──bundle.js
     ├──images
           ├──dog.png
           ├──cat.png

在 YourContainer.js 中，您想创建一个新的上下文来要求该图像目录

const images = require.context('../../public/images', true);

从那里，您可以专门引用图像：

 const dog = images('./dog.png');

或动态地：

 let animal = images(`./${someVariable}.png`);

举一个更完整的例子，这里是你如何在遍历一个对象时做到这一点，使用键来拉你的图像，并将其作为样式道具传递给子组件：

 let YourContainer = ({ dispatch }) => {
const data = projectData["projectData"];

// Require context image folder
const images = require.context('../../public/images', true);

return (
    <div className="container-fluid">
        <Row>
            {
                // Iterate over data object
                Object.keys(data).map((keyname, keyindex)=> {

                    let code = data[keyname]["code"];
                    let title = data[keyname]["title"];
                    // Dynamically reference image
                    // Set as inline style
                    // Pass as prop to child
                    let imgsrc = images(`./${code}.png`);

                    let styler = {
                        backgroundImage: `url(${imgsrc})`
                    }

                    return <YourComponent
                                key={keyindex}
                                title={title}
                                style={styler}
                            />
                })
            }
        </Row>
    </div>
)
}

原文由 johnjohn 发布，翻译遵循 CC BY-SA 4.0 许可协议