Question

我正在尝试接收图像的公共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]”。这是有道理的，但我不知道如何获取在Storage.get()的解析器中返回的实际URL

Answer 1

尝试

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>
    )
  }
}

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

1 个答案: