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

【问题标题】：Can't Render Image When Path Stored in React Variable路径存储在 React 变量中时无法渲染图像
【发布时间】：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" 是什么。

标签： reactjs image path

【解决方案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 中动态加载大量图像，而无需手动将它们全部导入代码中。

【讨论】：