Question

我尝试使用从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>
        );
}
}

Answer 1

Should be 0: 0 Should be 1: 1 SHOULD NOT CHANGE : 0010 Should be 0: -13136 Should be 1: 0 SHOULD NOT CHANGE : 1-21471898220-13136处的网址指的是html网页而不是图片，因此它不会在links.web元素中显示任何内容。我不熟悉Rijksmuseum api，但看起来<img/>是您正在寻找的图像，所以也许试试这个：

webImage.url

（并在构造函数中将.. this.setState({ data: json.artObjects[0].webImage.url }); ..替换为[]。）如果对象没有图像，您可能还需要合并''。一旦开始使用数组，将状态属性hasImage重命名为data（或imageUrl）可能是个好主意。）

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

1 个答案: