React-konva。动态导入SVG

Question

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

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

它只有在我执行公共导入时才起作用：

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

那我该怎么做呢？

Answer 1

如果您将图像放在static或public文件夹中，您使用的第一个代码将工作得很好。我不知道你使用的是什么bundler，但它们中的许多(parsel，create-react-app等)都有一个专门的文件夹来存放静态文件。

useImage(url)不会像模块系统中那样导入文件。只需从网络地址下载图像。

据我所知，import mySvg from '../images/svg/mySvg.svg';是一种非标准的，但非常流行的静态文件导入方式。在mySvg变量中，您将有一个指向bundler将为您准备的图像的URL。