javascript - 访问或显示需要授权的上传图像

Question

我可以通过提供 access_token 成功上传图像等在授权 header 中，它返回给我一个 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" />