HttpEntityで取得した画像をimgタグで画像を表示したい

Question

JAVA側でHttpEntityを使用して画像の取得を行なっているのですが、<img>タグに取得した値を入れて画像を表示するやり方がわかりませんでした。
HttpEntityで取得した画像はimgタグに入れられるのでしょうか？
(HttpEntityがbyteデータとheaders でどのようにして画像を返しているのか分からない...)
わからない点や追記の欲しい部分はお申し付けください！　お力をお借りしたいです。

Service

public HttpEntity<byte[]> getImage(Long id, String imagePath) throws IOException {
    Product product = findProduct(id);
    if (product.getImagePath() == null) {
      throw new ProductNotImageException("画像が存在しません");
    }
    Resource resource = resourceLoader.getResource("File:" + uploadDir + imagePath);
// URL [file:src/main/resources/static/image/3c97e22d-2f38-445d-8c4d-0d8cdaf2dde0.jpg]

    byte[] b;
    // ResourceインタフェースはInputStreamSourceインタフェースを継承しているのでgetInputStreamメソッドで、リソースファイルのInputStreamを取得することができます。
    String mediaType;
    InputStream image = resource.getInputStream();
    mediaType = URLConnection.guessContentTypeFromStream(image);
//image = java.io.BufferedInputStream@5895482b


    // IOUtils型はInputStreamを読み込み、byte[]を返す静的メソッドを持ちます。
    b = IOUtils.toByteArray(image);
// b = [B@1aea231e

    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.valueOf(mediaType));
    headers.setContentLength(b.length);
    // headers =  [Content-Type:"image/jpeg", Content-Length:"26337"]
    return new HttpEntity<>(b, headers);

Controller

@GetMapping("{id}/images/{imagePath}")
  @ResponseStatus(HttpStatus.OK)
  public HttpEntity<byte[]> getImage(@PathVariable Long id, @PathVariable String imagePath)
      throws IOException {
    try {
      return productService.getImage(id, imagePath);
    } catch (IOException e) {
      throw new ProductNotImageException("画像が存在しません", e);
    }
  }

@Entity
@Table(name = "product")
public class Product {
  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private long id;

  private String title;

  private String description;

  private Integer price;

  private String imagePath;

const getImage = (id, imagePath, apiToken) => {
   productApi.get(`/${id}` + `/images` + `/${imagePath}`, generateHeader(apiToken));
};

<img src = "何を入れたらいいのか分からない">

Answer 1

<img src = "何を入れたらいいのか分からない">

Data URI schemeを参考にしてみてはどうでしょうか。
わたし自身はつかったことありませんが、data:ではじまるURLでイメージそのものを設定できるようです。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

Comments

[pokerStars]

ご返信ありがとうございます！
やはり、imgタグに入れるにはbase64などに変換する必要があるんですかねぇ...
一度やってはみたのですが、うまく画像に変換できなかったので諦めたのですがbase64に変換するやり方で粘ったほうがいいのかもしれませんね汗 ><