问题

Question

我试图从一个数组渲染几个图像，然后传递给一个＆＃34; Image＆＃34;组件作为属性。但是，无论出于何种原因，我想呈现的本地图像都没有显示出来。如果我加载托管在网址上的图片，该图片将显示，表明＆＃34; imageSource＆＃34;属性被传递到Image组件。我尝试过这样的源格式：

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

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

Answer 2

看到这个问题没有得到答案，我也在寻找答案，

我遇到了一个漂亮的技巧，仅使用URL即可加载图像

假设您使用的是create-react-app插件

您可以使用公用文件夹动态渲染图像

例如，如果将名称为“ image.jpg”的图像放置在您的应用程序的公用文件夹中。

您可以通过以下操作加载它

<img src={`${process.env.PUBLIC_URL}/image.jpg`} />

更多信息可在下面找到。 https://create-react-app.dev/docs/using-the-public-folder

Answer 3

问题

您遇到的问题是使用文件系统上的相对路径和类似但略有不同的URL路径以本地“ require”样式混合。

例如：

require('./some-resource.x')

告诉构建系统在相对于当前文件的本地目录中查找文件。重要的是使用它的是构建系统。

当您使用React组件或浏览器中正在运行的任何javascript时，没有本地磁盘的概念，只有运行它的页面/窗口上下文。

执行以下操作并非真正有效：

require('/img/some_image.jpg')

也

<img src="./img/some_image.jpg" />

因为第一个是指文件系统的根目录，这不太可能是您想要的，而第二个是指浏览器并不真正支持的概念（免责声明：它们可能与之兼容，但我没有测试过）。

我认为您的img目录可能与创建捆绑包的位置无关。

你应该怎么做？

如果您遵循具有public文件夹的通常结构，则可能使用images（或者您的情况下为img），则网络服务器将根据其配置来提供公共目录，可以是http://server/public或http://server/static，甚至可以直接位于根地址（http://server/）下方。

在DOM的上下文（即上述页面/窗口上下文）中，仅在当前位置（即http://server/path/to/page/img/image.jpg）或根位置引用图像是有意义的。无论哪种方式，您都应该执行以下操作：

import React from 'react';

const Image = function statelessFunctionComponentClass(props) {

  let source = props.imageIsRelative ?
                 'img/' + props.imageSource :
                 '/img/' + props.imageSource;

  const style = {
    image : {
      width: '400pt',
      height: '400pt'
    }
  }

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

export default Image

请注意，区别只是前面的/，它指示路径是相对于当前页面还是相对于Web服务器的根。

Answer 4

提及您拥有图像的图像文件夹路径。我在“SRC”文件夹下创建了文件夹。所以我保持我的代码如下。

let images = require.context('../../../assets/images', true);

let itemImg = images(`./${dynamicObject.photo}`).default;

默认为主要关键字。

使用ReactJS动态加载本地映像

4 个答案:

问题

你应该怎么做？