require() 在动态设置位置时抛出异常答案

【问题标题】：require() throwing an exception when dynamically setting locationrequire() 在动态设置位置时抛出异常
【发布时间】：2021-05-14 12:53:54
【问题描述】：

我的项目遇到了另一个我无法解决或理解的问题。

 useEffect(() => {
axios.get(API_BASE_URL + '/user/images', payload)
    .then(function (response) {
        if (response.status >= 200 && response.status < 300) {
            console.log("RESPONSE IMAGE:" + JSON.stringify(response.data, null, 2));

            let files = response.data.files[0];
            const requirestring = "../../images/public/" + files;

            let requireimg;
            if(files == null){
               requireimg = require("../../images/basic-profile-picture.jpg");
            }else {
                try{
         >>           requireimg = require(requirestring);
                }catch (e){
                    requireimg = require("../../images/basic-profile-picture.jpg");
                }
            }
            setMapImages(<Image className={"profilepicture"} src={requireimg.default} alt={"TEXT"} />);
        } else {
            alert("error getting images");
        }
    })
    .catch(function (error) {
        console.log("DOWNLOAD: " + error);
    });

为什么是这部分：

  requireimg = require(requirestring);

抛出此异常：

Cannot find module '../../images/public/600bc441b2b2b62c542bd135_profilepicture.jpg'

但这有效并且不会以某种方式抛出异常：

 requireimg = require("../../images/public/600bc441b2b2b62c542bd135_profilepicture.jpg")

当我使用“_”设置图像名称以获得更好的语法时，第一次发生异常。

【问题讨论】：

标签： javascript reactjs require

【解决方案1】：

这是因为 require 不是 JavaScript API 原生函数，而是 Node 函数。因此，当您尝试在浏览器中运行时，浏览器无法识别以变量为参数的 require 函数。

查看stackoverflow link了解更多详细信息

【讨论】：

谢谢。那么如何在 Javascript 中使用变量应用动态图像更改？
关注这个链接，也许可以帮到你-> StackOverFlow Link
在上面的链接中，看看纯js方法确实动态创建了一个img，你可以用concatened方法代替Template Literal，更干净，更容易使用。