Javascript 从URL内联导入SVG

我正在研究一个问题，需要将SVG图像从URL（AWS S3）加载到react组件。我能够使用SVG内联react组件从本地文件成功地显示和加载图像。但是，svg文件需要从S3 bucket内联加载，JS svg导入不适用于URL

---

因此，我正在尝试找到解决此问题的最佳替代方案？

您应该获取svg图像并将其粘贴到html中

const SVG_URL = url = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg';

class Svg extends React.Component {
  state = {
    svg: null,
    loading: false,
  }

  componentDidMount() {
    fetch(this.props.url)
      .then(res => res.text())
      .then(text => this.setState({ svg: text }));
  }

  render() {
    const { loading, svg } = this.state;
    if (loading) {
      return <div className="spinner"/>;
    } else if(!svg) {
      return <div className="error"/>
    }
    return <div dangerouslySetInnerHTML={{ __html: this.state.svg}}/>;
  }
}

ReactDOM.render(
  <Svg url='https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg' />,
  document.querySelector("#app")
);

const SVG\u URL=URL=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg';
类Svg扩展了React.Component{
状态={
svg:null，
加载：false，
}
componentDidMount（）{
获取（this.props.url）
。然后（res=>res.text（））
.then（text=>this.setState（{svg:text}））；
}
render（）{
const{loading，svg}=this.state；
如果（装载）{
返回；
}如果（！svg）{
返回
}
返回；
}
}
ReactDOM.render(
,
文档查询选择器（“app”）
);

您可以在这里编辑示例

React不建议使用

DangerlySetinerHTML

，因此您应该使用类似

svg inline React

的软件包，为我指明了正确的方向，谢谢！对于像我这样的谷歌用户来说，以下是使用钩子实现相同方法：

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 }}
        />
    );
}

import React，{useffect，useState}来自“React”；
const SvgInline=props=>{
const[svg，setSvg]=useState（null）；
const[isLoaded，setIsLoaded]=useState（false）；
const[isErrored，setIsErrored]=useState（false）；
useffect（（）=>{
获取（props.url）
。然后（res=>res.text（））
.然后（设置VG）
.catch（设置错误）
.然后（（）=>setIsLoaded（true））
}，[props.url]）；
返回(
);
}

不确定您的意思。。。如果图像在网络上可见，您应该能够将其添加到图像标记中，对吗？它就像其他html文档一样。还是编译时/如果编译时会出现问题？要从URL将SVG内联作为React组件导入，我设法从本地文件内联加载SVG，但不是从URL加载