質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

2488閲覧

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

pokerStars

総合スコア67

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/07/09 10:23

編集2022/01/12 10:55

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

java

1Service 2 3public HttpEntity<byte[]> getImage(Long id, String imagePath) throws IOException { 4 Product product = findProduct(id); 5 if (product.getImagePath() == null) { 6 throw new ProductNotImageException("画像が存在しません"); 7 } 8 Resource resource = resourceLoader.getResource("File:" + uploadDir + imagePath); 9// URL [file:src/main/resources/static/image/3c97e22d-2f38-445d-8c4d-0d8cdaf2dde0.jpg] 10 11 byte[] b; 12 // ResourceインタフェースはInputStreamSourceインタフェースを継承しているのでgetInputStreamメソッドで、リソースファイルのInputStreamを取得することができます。 13 String mediaType; 14 InputStream image = resource.getInputStream(); 15 mediaType = URLConnection.guessContentTypeFromStream(image); 16//image = java.io.BufferedInputStream@5895482b 17 18 19 // IOUtils型はInputStreamを読み込み、byte[]を返す静的メソッドを持ちます。 20 b = IOUtils.toByteArray(image); 21// b = [B@1aea231e 22 23 HttpHeaders headers = new HttpHeaders(); 24 headers.setContentType(MediaType.valueOf(mediaType)); 25 headers.setContentLength(b.length); 26 // headers = [Content-Type:"image/jpeg", Content-Length:"26337"] 27 return new HttpEntity<>(b, headers);

Java

1Controller 2 3@GetMapping("{id}/images/{imagePath}") 4 @ResponseStatus(HttpStatus.OK) 5 public HttpEntity<byte[]> getImage(@PathVariable Long id, @PathVariable String imagePath) 6 throws IOException { 7 try { 8 return productService.getImage(id, imagePath); 9 } catch (IOException e) { 10 throw new ProductNotImageException("画像が存在しません", e); 11 } 12 }

Java

1@Entity 2@Table(name = "product") 3public class Product { 4 @Id 5 @GeneratedValue(strategy = GenerationType.IDENTITY) 6 private long id; 7 8 private String title; 9 10 private String description; 11 12 private Integer price; 13 14 private String imagePath; 15

React

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

React

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

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

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

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

投稿2020/07/11 12:09

編集2020/07/11 12:10
shiketa

総合スコア3971

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pokerStars

2020/07/11 15:17

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問