使用 ReactJS 动态加载本地图像

Posted 2023-02-21

【中文标题】使用 ReactJS 动态加载本地图像

【英文标题】：Dynamically Loading Local Images with ReactJS

【发布时间】：2017-06-16 07:02:05

【问题描述】：

我正在尝试从一个数组中渲染多个图像，并将其作为属性传递给“图像”组件。但是，无论出于何种原因，我想渲染的本地图像都没有显示出来。如果我加载托管在某个网址上的图像，该图像将显示出来，这表明传递给 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

【问题讨论】：

您的 React 应用程序的捆绑器或构建器需要知道要加载哪些图像，因此您至少需要指定一个上下文。如果你使用 Webpack，这将被称为 require.context 选项

感谢您的回复。你能再清楚一点吗？一个链接会很有帮助。

你找到解决方案了吗？

【参考方案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>  
)   

【讨论】：

当我这样做时，即使 dog.png 存在，我也会得到结果Error: Cannot find module './dog.png'

@MattKorostoff 我认为你应该这样做images(`./$code.png`).default;

【参考方案2】：

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

我遇到了一个仅使用 url 加载图像的绝妙技巧

假设您正在使用 create-react-app 插件

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

例如，如果您将名称为“image.jpg”的图像放入您的 react 应用的公共文件夹中。

您可以通过执行以下操作来加载它

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

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

【参考方案3】：

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

让图像 = require.context('../../../assets/images', true); 让 itemImg = images(`./$dynamicObject.photo`).default;

默认是主关键字。

【讨论】：

谢谢。我正在关注上面的所有内容，但它不起作用......添加 .default 是诀窍。

将图片放在 assets 文件夹中。那应该在 src 文件夹中。那就试试吧

【参考方案4】：

问题

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

例如：

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

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

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

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

require('/img/some_image.jpg')

也没有

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

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

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

你应该怎么做？

如果您遵循具有public 文件夹的通常结构，那么可能是images（或img在您的情况下），那么网络服务器将根据其配置为公共目录提供服务，可能是@987654328 @ 或 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

注意区别只是前面的/，它表示路径是相对于当前页面还是网络服务器的根目录。

【参考方案5】：

我遇到了这个问题并找到了一种解决方法，我不需要将图像放入我的公用文件夹中。我的文件夹结构看起来像这样。

APP
├──src
     ├──components
        ├──ProjectCard.js
     ├──images
           ├──pic1.png
           ├──pic2.png

我通过一个道具使用 from 传入了我的图像。我使用 MaterialUI Card 组件作为模板。

您应该使用require.context() 指向存储图像的文件夹，并使用以下行。我把我的放在进口下面。

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

然后，当您尝试加载图像时，您应该使用以下行来使用调用。您可以将 .png 替换为 .jpg 或您正在使用的任何图像类型。

images(`./$prop.imageName.png`).default;

下面是一个示例，它看起来被来自自定义 Material UI Card 组件的更多代码所包围，其中myprop.imgName 是不带文件类型的图像名称。

/* imports */
const images = require.context('../images', true);  /* This is the key line 1 */

export default function MyCard( myprop )  */ Remember to include your props */
    return (
        <Card sx= maxWidth: 345 >
            <CardMedia
                component="img"
                
                image=images(`./$myprop.imgName.png`).default /*Dynamic image loaded via prop*/
                alt=myprop.imgName

            />
            /* ... other code ... */
        </Card>
    );

查看 *** 后，我最大的问题是我需要在 images() 调用的末尾包含 default 关键字。