访问或显示需要授权的上传图片

Question

我可以通过在授权标头中提供access_token 等来成功上传图片，它会返回一个downloadURL。对于上传，我的做法是：

let res = await fetch(URL, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${token}`
      },
      body: data
    })
      .then(response => {
        return response.json()
      })
      .then(data => {
        return data
      })
      .catch(error => {
        return error
      })

现在，我希望该 downloadURL 在 html <img /> 标记中显示为 `

const downlaodURL = '/download/pid1/VwXLvSKQzp/Selection_006.png' 
<img src=`${downloadURL}`alt='image not found' />

但是当我尝试访问该图像时，它表示您未通过以下身份验证：

如何访问或在 HTML 标记中显示？

我有很多图像，我将其渲染为：

{images ? images.map((img, index) => (
                    <PinnedImage
                      key={index}
                      name={img.mediaName}
                      picture={img.downloadURL}
                      url={img.downloadURL}
                    />
                  )) : null} 

在 PinnedImage 组件中：

<img className="imgHeight" src={this.props.picture} alt="image not found" />

如何显示？我应该再次为所有图像使用下一个经过身份验证的服务器吗？

Answer 1

尝试在 PinnedImage 组件中执行 AJAX 调用以检索如下图像 PinnedImage.jsx

export class PinnedImage extends Component
{
 constructor(props)
 {
  super(props);
  this.state={image:''}
 }
componentWillMount()
{
const downlaodURL = '/download/pid1/VwXLvSKQzp/Selection_006.png' 
await fetch(downlaodURL , {
  method: 'GET',
  headers: {
    Authorization: `Bearer ${token}`
  }
 })
  .then(response => {
    return response.json()
  })
  .then(data => {
    this.setState({image:data});
  })
  .catch(error => {
    return error
  })

}

}

现在 this.state.image 保存实际的图像数据（可能是 blob 类型），可以在任何 React 生命周期方法（如 render() ）中引用。

 <img className="imgHeight" src={this.state.image} alt="image not found" />