Javascript 康瓦。动态导入SVG

我有一个带有SVG的文件夹。我需要在Konva的舞台上动态添加这些SVG。 我尝试使用这个组件。但它不起作用

const URLImage = (name) => {
  const [image] = useImage(`../images/svg/${name}.svg`);
  return <Image image={image} />;
};

---

那我该怎么办

如果您将图像放在

静态

或

公共

文件夹中，您使用的第一个代码就可以正常工作。我不知道您使用的是什么捆绑包，但其中许多（parsel、createreact应用程序等）都有一个用于存放静态文件的特殊文件夹

useImage（url）

没有像模块系统中那样导入文件。只需从网络地址下载图像

---

我知道，

从“../images/svg/mySvg.svg”导入mySvg

是一种非标准但非常流行的导入静态文件的方法。在

mySvg

变量中，您将有一个指向bundler将为您准备的图像的URL。

如果您将图像放在

静态

或

公共

文件夹中，您使用的第一个代码将正常工作。我不知道您使用的是什么捆绑包，但其中许多（parsel、createreact应用程序等）都有一个用于存放静态文件的特殊文件夹

useImage（url）

没有像模块系统中那样导入文件。只需从网络地址下载图像

---

我知道，

从“../images/svg/mySvg.svg”导入mySvg

是一种非标准但非常流行的导入静态文件的方法。在

mySvg

变量中，您将有一个指向bundler将为您准备的图像的URL。

我使用CreateReact应用程序并了解公用文件夹。但我想可能还有其他方法可以导入图像。看起来我最终将不得不使用“导入自”。我使用create react应用程序并了解公用文件夹。但我想可能还有其他方法可以导入图像。看起来我最终不得不使用“导入自”。

import mySvg from '../images/svg/mySvg.svg';
....
const [image] = useImage(mySvg);