时间戳

首页 > 解决方案 > 如何将存储在 AWS S3 中的图像中的公共 URL 插入 JSX 组件？

reactjs - 如何将存储在 AWS S3 中的图像中的公共 URL 插入 JSX 组件？

问题描述

我正在尝试接收图像的公共 URL，这些图像存储在 AWS S3 存储中，如下所示：Storage.get(imageKey)=> Promise

但是我在存储该承诺的返回值时遇到了问题。

这是我的代码

import { Storage } from 'aws-amplify'

class Images extends Component {

  getImgUrl = async key => {
    return Storage.get(key)
    .then(res => (res))
    .catch(err => console.log(err))
  }

  render() {
    return(
      <div>
        {arrayWithObjects.map(({img}) => (
          <img src={this.getImgUrl(img)} />
        )}
      </div>
    )
  }
}

使用此代码，我在 src 中收到“[object Promise]”。这是有道理的，但我不知道如何获取在解析器中返回的实际 URLStorage.get()

标签： reactjsamazon-s3

解决方案

尝试这个

import { Storage } from 'aws-amplify'

const getImgUrl = key => {
    return Storage.get(key)
    .then(res => (res))
    .catch(err => console.log(err))
  }

class Image extends Component {
   this.state = {
     imgSrc: null
   }

  componentDidMount(){
      getImgUrl(this.props.img).then(src => {
        this.setState({imgSrc: src});
      });
   }

  render() {

     if(!this.state.imgSrc) {
       return null;
     }

       return <img src={this.state.imgSrc} />;
    }
}

class Images extends Component {
  render() {
    return(
      <div>
        {arrayWithObjects.map(({img}) => (
          <Image img={img} />
        )}
      </div>
    )
  }
}

推荐阅读