如何将背景图像设置为 SVG答案

【问题标题】：how can i set the background image as SVG如何将背景图像设置为 SVG
【发布时间】：2021-07-29 06:12:20
【问题描述】：

所以我尝试导入 SVG 背景图像，当我导入 PNG 或任何其他类型但没有显示为 SVG 时它可以工作如果您知道在 reactJS 上使用织物画布的更好主意，请告诉我

    const Tool = () => {
      const [canvas, setCanvas] = useState("");
      useEffect(() => {
        setCanvas(initCanvas());
      }, []);
      const initCanvas = () =>
        new fabric.Canvas("canvas", {
          height: 800,
          width: 800,
    
          backgroundImage: "/images/__Body1.svg", // here is the imported image
        });
    
    
      return (
        <div className="test">
          
    
          <React.Fragment>
            <CssBaseline />
            <Container maxWidth="md">
    
              <canvas id="canvas" />
    
            </Container>
          </React.Fragment>
        </div>
      );
    };
    
    export default Tool;

【问题讨论】：

标签： reactjs canvas fabricjs

【解决方案1】：

你应该可以使用backgroundImage: url(/images/__Body1.svg)。

只需确保 svg 文件包含在生成的文件夹结构中即可。

如果您的输出包中没有/images/__Body1.svg 文件并且您希望捆绑器处理它，您可能需要进行一些更改。据（大概）webpack 可以看出，/images/__Body1.svg 只是一个字符串，因此它不会将其作为捆绑的一部分复制过来。如果是这种情况（svg 未添加到生成的包中），您可以查看 webpack docs 关于更新 webpack.config.js 文件的信息。请注意，您可能还需要手动包含 svg 文件，即。

import bodySvg from ('/images/__Body1.svg');
//...
  new fabric.Canvas("canvas", {
    height: 800,
    width: 800,
    backgroundImage: bodySvg, // here is the imported image
  });
//...

another resource

【讨论】：