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

Question

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

我在Whosebug上找不到相关资料，如果能从你这里得到一些见解就太好了。

部分数据如下：

{
 "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>
        );
}
}

Answer 1

links.web 中的 url 指的是 html 页面而不是图像，因此它不会在 <img/> 元素中显示任何内容。我对 Rijksmuseum api 不熟悉，但看起来 webImage.url 是你要找的图片，所以也许试试这个：

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

（并在构造函数中将 [] 替换为 ''。）您可能还需要合并 hasImage，以防对象没有图像。将状态属性 data 重命名为 imageUrl（或 imageUrls 一旦你开始使用数组可能是个好主意。）

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

How can I show image passed as this.state in React.js?

api

fetch

reactjs