需要找不到要导入的图像路径答案

【问题标题】：Require cant find image path to import需要找不到要导入的图像路径
【发布时间】：2021-05-18 21:44:50
【问题描述】：

我正在尝试根据随机和语言选择动态导入图像。这是一个代码重构，所以旧项目这段代码运行良好。

找不到模块和错误。我想知道问题可能是什么以及我需要做些什么来解决它。

const BackgroundAnimation = () => {
  const currentList = useSelector((state) => state.list.currentList);
  const [animate, setAnimate] = useState(false);
  const [url, setUrl] = useState('url("")');
  const [nextUrl, setNextUrl] = useState("");

  const getBackgroundUrl = () => {
    const languageBG = getRandomLangCode();
    const basePath = "../../assets/backgrounds/";
    const src = require(`${basePath}desktop/bg-${languageBG}.jpg`);
    setNextUrl(src);
  };

  useEffect(() => {
    getBackgroundUrl();
  }, []);

  // Animation Loop
  useEffect(() => {
    setTimeout(() => {
      setAnimate(!animate);
      getBackgroundUrl();
    }, 6000);
  }, [animate]);

  //Static Background
  useEffect(() => {
    if (currentList !== null && window.innerWidth <= 767) {
      const language = languagesBGKey[currentList.language.toLowerCase()];
      const languagesList = languages[language];
      const randomIndex = Math.floor(
        Math.random() * (languagesList.length - 1 - 0) + 0
      );
      const languageBG = languagesList[randomIndex][1];
      const src = require(`${basePath}mobile/bg-${languageBG}.jpg`);
      const url = `url(${src})`;

      setUrl(url);
    }
  }, [currentList]);

  return (
    <>
      <img
        style={{ opacity: 0 }}
        src={nextUrl}
        onLoad={() => {
          setUrl(`url(${nextUrl})`);
        }}
        onError={(e) => {
          console.log(e);
        }}
      />
      <div
        id="backgroundAnimation"
        style={{
          backgroundImage: url,
        }}
      ></div>
    </>
  );
};

【问题讨论】：

代码在哪一行失败？对于 getRandomLangCode 函数返回的所有可能的语言代码组合，图像是否存在？
请提供错误详细信息和您已经完成的任何调试详细信息。这看起来像一个代码转储，您希望其他人为您调试它。您能否将您正在重构的工作版本包括在内，以进行比较？
第 15 行出现错误...错误是错误：找不到模块“../../assets/backgrounds/desktop/bg-en-AU.jpg”。所有图像都存在。我需要知道为什么 require 无法找到该文件。所有潜在的目录路径组合也不起作用。
您能否使用BackgroundAnimation 组件和单个图像创建一个CodeSandbox 来重现该问题？

标签： javascript reactjs require

【解决方案1】：

你有没有试过直接把 require 放到 img 的 src 中。我认为您不能将要求传递给 setState。如果可行，试试这个：

const src = `${basePath}desktop/bg-${languageBG}.jpg`;

return (
  <>
    <img
      style={{ opacity: 0 }}
      src={require(nextUrl)}
      onLoad={() => {
        setUrl(`url(${nextUrl})`);
      }}
      onError={(e) => {
        console.log(e);
      }}
    />
  </>
);

【讨论】：