如何从后端下载图像并将其显示在img标签中？

Question

I want to download an image from my REST API with axios and display it in an img tag. Can I do this without locally saving the file?

I had used <img src="localhost/api/imgs/1"/> so far, but I'm securing the endpoint with token management now.

Any ideas how this is normally done?

Answer 1

It looks like you are also using React. Are you able to save the image to the state and then pass it along as the source?

import React, { Component } from "react";
import API from 'wherever you are calling axis from';

class YourClass extends Component {
state = {
img = ""
}

getImage = () => {
API.getImage()
.then(res =>
this.setState({ img: res.data })
)
.catch(error => console.log(error)
}

render() {
<div>
<img src={this.state.img}>
</div>
}
}