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

问题描述

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

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

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

解决方法

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

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

javascript reactjs reactjs require require