Reactjs 如何在React.js中显示作为this.state传递的图像？

我正在尝试使用从API获取的数据显示图像。我将API获取的数据作为状态传递。渲染状态时，它不显示图像，而是在浏览器中显示alt

我在StackOverflow中找不到相关信息，如果我能从您那里获得一些见解，那就太好了

部分数据如下：

{
 "elapsedMilliseconds": 33,
 "count": 359,
 "artObjects": [
    {
      "links": {
      "self": "https://www.rijksmuseum.nl/api/nl/collection/SK-A-180",
      "web": "https://www.rijksmuseum.nl/nl/collectie/SK-A-180"
    },
    ......

还有我的密码

export default class Collection extends Component {

constructor(props){
    super(props);
    this.state = {
        data : []
     }
}
componentDidMount(){
    fetch(url)
     .then(response => response.json())
     .then(json => {
        this.setState({
            data: json.artObjects[0].links.web
        });
     });
}
render(){

    return(
        <div>
        <h2> Rijks Museum Collection </h2>
        <div><img src={this.state.data} alt="img" /></div>
        </div>
        );
}
}

导出默认类集合扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
}
}
componentDidMount（）{
获取（url）
.then（response=>response.json（））
。然后（json=>{
这是我的国家({
数据：json.artObjects[0].links.web
});
});
}
render（）{
返回(
里杰克斯博物馆藏品
);
}
}
链接.web上的url
指的是html页面而不是图像，因此它不会在
元素中显示任何内容。我不熟悉Rijksmuseum api，但它看起来像
webImage。url
就是您要查找的图像，所以可以尝试以下方法：

    ..
    this.setState({
        data: json.artObjects[0].webImage.url
    });
    ..

（并在构造函数中将
[]
替换为
'
）。如果对象没有图像，您可能还需要合并
hasImage
。如果您开始使用数组，将state属性
data
重命名为
imageUrl
（或者
imageUrl
）可能是个好主意。
感谢您花时间查看API信息。它现在起作用了。