时间戳

首页 > 解决方案 > 反应康瓦。动态导入 SVG

javascript - 反应康瓦。动态导入 SVG

问题描述

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

所以我该怎么做？=)

标签： javascriptreactjskonvajsreact-konvakonvajs-reactjs

解决方案

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

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

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

推荐阅读