Java IOストリームで画像を読み込んでフロントエンドに表示するコードを共有

最近のプロジェクトで、IOストリームを使って画像を読み込んでフロントエンドページに表示する必要がありました。以前はURLパスを使って画像を表示していましたが、IOストリームを使って画像を読み込むと非常に複雑に感じました。しかし、タスクが割り当てられたので、プログラマーとしてのみ実行することを選びました。その後、少し資料を見てAPIを見ました。

ちょっと簡単そうだな、IOストリームを使って画像を読み込んでページに表示するのは初めてだから、以下のコードを記録しておきます

バックエンドコード:

/** 
   * IOストリームで画像を読み取る by:long 
   * @return 
   */
@RequestMapping(value = "/IoReadImage/{imgName}", method = RequestMethod.GET) 
  public String IoReadImage(@PathVariable String imgName,HttpServletRequest request,HttpServletResponse response) throws IOException {
	ServletOutputStream out = null;
	FileInputStream ips = null;
	try {
		//画像の保存場所を取得します 
		String imgPath = Constans.FOLDER_IMAGE + imgName;
		ips = new FileInputStream(new File(imgPath));
		response.setContentType("multipart/form-data");
		out = response.getOutputStream();
		//ファイルストリームを読み取ります 
		int len = 0;
		byte[] buffer = new byte[1024 * 10);
		while ((len = ips.read(buffer)) != -1{
			out.write(buffer,0,len);
		}
		out.flush();
	}
	catch (Exception e){
		e.printStackTrace();
	}
	finally {
		out.close();
		ips.close();
	}
	return null;
}

フロントエンドコード - 方法1:

<span style="white-space:pre;"> </span><div style="float: left;"> 
     <#--${model.userDatil.photo}はデータベースに保存されているファイル名です--> 
     <img src="${ctx}/userInfo/IoReadImage/${model.userDatil.photo}" id="npcImg" width="125" height="148/> 
     <input type="hidden" id="photo" name="photo"/> 
    </div> 

jsコード - 方法2:

var npcName = $('#npcImg').data('val'); 
var img = document.getElementById("npcImg"); 
img.src = '/userInfo/IoReadImage/+npcName; 

jQueryコード - 方法3:

$('#npcImg').attr('src','/userInfo/IoReadImage/+npcName); 

それだけです。フロントエンドで画像を表示できます。コードはわずか数行しかありませんので、追加のコメントは省略します。

まとめ

これで、java IOストリームを使用して画像を読み込んでフロントエンドに表示するコードの全てを共有しました。皆様に役立つことを願っています。興味を持たれた方、このサイトの他の関連トピックもご覧ください。何か不足点があれば、コメントをお待ちしております。皆様のサポートに感謝します！

声明：この記事の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、アップロードされた内容であり、このサイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害を疑う内容があれば、notice#wまでメールをお送りください。3codebox.com（メール送信時は、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、このサイトは即座に侵害を疑われるコンテンツを削除します。