Question

我有来自闪烁的图片网址，我想在屏幕上显示它们，但我无法获取任何图像。

这是我的代码：

loadimages(e) { 
  e.preventDefault();
  this.setState({spinner:true});
  console.log('spinner');
  //  axios.get(`https://www.pexels.com/`).then(res=>{
  //    console.log(this.state.spinner);
  //    this.setState({images:res.data,spinner:false});
  //  });

  axios.get( "https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json&nojsoncallback=true" ) 
    .then((response) => {
      console.log('hellodata', response.data.items);
      this.setState({
        images: response.data.items,
        spinner:false
      });
      console.log('images', this.state.images);
    })
    .catch(function(err){
      console.log(err);
    })
}

render() {
  const mappedStorage = this.state.images.map((item) => <li>{item.media.m}</li>)
  return (
    <div className="fun2">
      {this.state.spinner ?
        <div>
          <MDSpinner size={50}/>
        </div>
      : null
      }

      {/* <ul>{mappedStorage} */}
      <ul>
        <img src={mappedStorage} />
      </ul>
      <button onClick={this.loadimages}>
        Click Here
      </button> 
    </div>
  )
}

这是来自API的示例回复：

{
  "title": "Recent Uploads tagged kitten",
  "link": "https://www.flickr.com/photos/tags/kitten/",
  "description": "",
  "modified": "2018-11-13T13:31:05Z",
  "generator": "https://www.flickr.com",
  "items": [
        {
          "title": "flo_02-10-06 001",
          "link": "https://...",
          "media": {
            "m": "https://....jpg"
          },
          "date_taken": "2018-11-13T12:09:32-08:00",
          "description": "......"
          "published": "2018-11-13T11:11:06Z",
          "author": "nobody@flickr.com (\"nikita zenon2\")",
          "author_id": "125437611@N07",
          "tags": "some tags here"
        },
        {
          "title": "flo_02-10-06 002",
          "link": "https://...",
          "media": {
            "m": "https://....jpg"
          },
          "date_taken": "2018-11-13T12:09:32-08:00",
          "description": "......"
          "published": "2018-11-13T11:11:06Z",
          "author": "nobody@flickr.com (\"nikita zenon2\")",
          "author_id": "125437611@N07",
          "tags": "some tags here"
        },

我得到了网址，但现在我现在不知道如何在屏幕上显示图片，也许是通过使用地图功能。如果您知道，请告诉我。我是ReactJs的新手。

由于

Answer 1

实际上，您几乎需要将img标记嵌套在li标记内。

<!-- language: lang-js -->

render() {
    const mappedStorage = this.state.images.map((item) => <li><img src={item.media.m} /></li>)
    return (
       <div className="fun2">
          {this.state.spinner?
               <div>
                    <MDSpinner  size={50}/>
               </div>
           :null}

           <ul>{mappedStorage}<ul>

           <button onClick={this.loadimages}>
                Click Here
           </button> 
      </div>
    );
}

使用网址在屏幕上显示图像

1 个答案: