路径存储在 React 变量中时无法渲染图像

Posted 2023-02-23

【中文标题】路径存储在 React 变量中时无法渲染图像

【英文标题】：Can't Render Image When Path Stored in React Variable

【发布时间】：2020-12-30 13:45:34

【问题描述】：

我有很多图片需要在我的 react 应用中使用，所以我不想一一导入。为此，我使用reqiure()。然而，虽然require 在下面这样使用时有效：

return <img src=require("./images/lets_go.png") />

如果我将该路径存储在变量中：

let v = "./images/lets_go.png";
return <img src=require(v) />

我收到Error: Cannot find module './images/lets_go.png'

为什么它不允许我使用存储在变量中的路径（它是完全相同的路径），我怎样才能使它工作？

【问题讨论】：

我很确定这与 webpack 不知道如何处理这样的动态导入有关。您可能希望通过部分导入来缩小搜索范围。 SEE

requie(variable) 和 require('xxx') 看起来一样，但对于 webpack 来说却不同。当 webpack 看到 "require('xxx')" 时，它会知道 'xxx' 是一个常量，但对于 "require(v)" 它不知道此时 "v" 是什么。

【参考方案1】：

您可以导入图像并将其绑定到 src 属性，就像它在 create-react-app 中所做的那样，带有如下徽标：

import logo from './logo.png' // relative path to image 

class Home extends Component  
    render()  
        return ( 
            <img src=logo alt="logo"/> 
        )  
    

或者，如果您使用 create-react-app cli 创建项目，则可以访问您的公共文件夹。只需在 public 中创建 images 或 assets 文件夹，您就可以在 jsx 中访问它，如下所示：

public/images/ -> store images here

<img src="/images/home.png" /> -> use it like this in jsx

【参考方案2】：

这将使用“部分”要求来工作，您将路径作为文本提供，图像名称可以是变量。发生这种情况的原因与 webpack 处理静态路径的方式有关。

我们所知道的有效，（静态图像路径）：

<img src=require("./images/lets_go.png") />

尝试使路径成为我们发现的这样的变量不起作用

let v = "./images/lets_go.png";

<img src=require(v) />

尝试使路径成为变量时会起作用

 let v = "lets_go.png";

    <img src=require(`./images/$v`).default />

请注意，由于与反应脚本相关的错误，需要在 2021 年 5 月的要求末尾添加 .default。如果您将来阅读本文，这可能已修复且不需要。

当然，您需要将所有图像存储在同一个文件夹中，但这可以让您在 react/js 中动态加载大量图像，而无需手动将它们全部导入代码中。