反应康瓦。动态导入 SVG

【问题标题】：React-konva. Dynamic import SVG反应康瓦。动态导入 SVG
【发布时间】：2020-11-07 12:59:11
【问题描述】：

我有一个带有 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);

那我该怎么办？ =)

【问题讨论】：

【解决方案1】：

如果您将图像放在static 或public 文件夹中，您使用的第一个代码就可以正常工作。我不知道您使用的是什么捆绑器，但其中许多（解析器、create-react-app 等）都有一个用于存放静态文件的特殊文件夹。

useImage(url) 没有像在模块系统中那样导入文件。只是从网络地址下载图片。

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

【讨论】：