加载html <img>包含jwt-token

Question

我在一个项目中使用reactjs。我有这个图像服务器(asp . net core web API带有一个authorization -attribute)，所以它需要一个jwt-token。

[Authorize]
[Route("[controller]")]
[HttpGet("{galleryShortName}/{fileName}")]
public async Task<FileStreamResult> GetImage(string galleryShortName, string fileName) {...}

是否有任何方法我可以发送我的访问令牌与呼叫从服务器在我的标签?

本文似乎使用了角管道。我不能说我100%理解了这篇文章，因为我不会说Angular，但是有没有办法在请求中插入一个令牌呢?

另一种选择是有占位符图像，并加载图像数据与fetch(使用认证头)，但我如何把它们放在占位符?

还有什么建议吗?

Answer 1

这篇文章实际上是建议您使用JavaScript XHR请求执行http请求来获取图像，然后将图像转换为base64，以便您可以将其用作img标记的src。

你链接的文章是针对Angular.js的，它不同于React.js。如果您想使用本文中描述的方法，这里有一个纯JS解决方案。然后，我将把它包装在一个自定义图像组件中。

// This function is asynchronous since it returns a promise
// It converts a binary blob into a base64 string representation
function blobToBase64(blob) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
resolve(reader.result);
};
});
}
function fetchImageAsBase64(url) {
return new Promise((resolve) => {
const jwt = "pretend this is a jwt";
// Make a headers object that we can add to the request
const headers = new Headers({
authorization: "Bearer " + jwt,
});
// Make the request and wait for the response
window
.fetch(url, { headers })
.then((response) => response.blob())
.then((blob) => blobToBase64(blob))
.then((base64) => resolve(base64));
});
}
// This is our custom image component that puts this together
class SecureImage extends React.Component {
constructor(props) {
super(props);
this.state = {
imageSrc: null,
};
}
componentDidMount() {
fetchImageAsBase64(this.props.src).then((base64String) => {
this.setState({
imageSrc: base64String,
});
});
}
render() {
if (!this.state.imageSrc) {
// If you want you can return a loading component here
}
return <img src={this.state.imageSrc} alt={this.props.alt} width={200} />;
}
}
ReactDOM.render(
<SecureImage src="https://source.unsplash.com/random" alt="placeholder" />,
document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>