从 URL 内联导入 SVG

Question

我正在处理需要将 SVG 图像从 URL(AWS S3) 加载到反应组件的问题。我能够使用来自本地文件的 SVG 内联反应组件成功显示和加载图像。但是，svg 文件需要从 S3 存储桶内联加载，JS svg 导入不适用于 URL。

所以我正在尝试为此找到最佳的替代解决方案？

原文由 Mikko Lasso 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

@ivnkld 的回答 为我指明了正确的方向，谢谢！对于像我这样的 Google 员工，这里是使用钩子实现相同方法的方法：

 import React, { useEffect, useState } from 'react';

const SvgInline = props => {
    const [svg, setSvg] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [isErrored, setIsErrored] = useState(false);

    useEffect(() => {
        fetch(props.url)
            .then(res => res.text())
            .then(setSvg)
            .catch(setIsErrored)
            .then(() => setIsLoaded(true))
    }, [props.url]);

    return (
        <div
            className={`svgInline svgInline--${isLoaded ? 'loaded' : 'loading'} ${isErrored ? 'svgInline--errored' : ''}`}
            dangerouslySetInnerHTML={{ __html: svg }}
        />
    );
}

原文由 Petr Cibulka 发布，翻译遵循 CC BY-SA 4.0 许可协议