記事ディレクトリ
序文
img の src 属性は、フロント エンドが画像を表示するために使用するソースです。一般に、src は、プロジェクト内のリソース\静的価格フォルダーにある画像を表示したり、パブリック ネットワーク上の画像を表示したりする最も一般的な方法です。フロントエンドでローカルの写真を表示したいのですが、どう対処すればよいでしょうか？ローカル イメージのアドレス (例: src="D:\Users\test.jpg") を直接使用する場合、フロント エンドは表示できません。
1. HTML画像 - 画像タグ（）
1.1 イメージタグのソース属性(Src)
<img> は空のタグであり、属性のみが含まれており、終了タグはありません。
ページに画像を表示するには、source 属性 (src) を使用する必要があります。src は「ソース」を指します。source プロパティの値は、画像の URL アドレスです。
これは、プロジェクトの resource\static\img\1.jpg 画像をフロントエンドに表示することを意味します。
alt 属性は、画像の代替テキストの文字列を定義するために使用されます。ブラウザが画像を読み込めない場合、代替テキスト属性はリーダーに不足している情報を伝えます。
1.2 プロジェクト内の画像を表示する画像タグのソース属性(Src)
<img src="img\1.jpg" alt="图片1" width="710" height="904">
1.3 イメージタグのソース属性(Src)でネットワークイメージを表示
<img src="https://cn.bing.com/images/search?view=detailV2&ccid=CHB%2blvhE&id=BCC6162523ACBBC86A0B525F6D66FB3A13AA6CE9&thid=OIP.CHB-lvhE4q3AKMRtSy1MjwHaE6&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.08707e96f844e2adc028c46d4b2d4c8f%3frik%3d6WyqEzr7Zm1fUg%26riu%3dhttp%253a%252f%252fimg.pconline.com.cn%252fimages%252fupload%252fupc%252ftx%252fphotoblog%252f1606%252f09%252fc11%252f22613129_1465478292330.jpg%26ehk%3dRsVcxTWo%252f4%252fBxDh9yrKJYEpfgkI7n5SZ8zOP4fOzxOw%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=2136&expw=3216&q=%e8%93%9d%e5%a4%a9%e7%99%bd%e4%ba%91&simid=608042815603765163&FORM=IRPRST&ck=803BE79ECFB56BAE48C57F2B31E69FBA&selectedIndex=0&idpp=overlayview&ajaxhist=0&ajaxserp=0" alt="图片1" width="710" height="904">
2. 画像タグ ( ) はローカル画像を表示します
2.1 ローカル画像を直接表示する
<img src="http://127.0.0.1:8080/readImg" alt="图片1" width="710" height="904">
127.0.0.1 はローカル IP アドレス、8080 はプロジェクト起動用のポート番号です。
/readImg は、バックグラウンドに画像ストリームを返すように要求することを意味します。以下は、ローカルの D:\img\1.jpg 画像を表示するための Java バックグラウンド処理コードです。
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedOutputStream;
import java.io.FileInputStream;
import java.io.OutputStream;
@Controller
public class ShowLocalImg {
@RequestMapping("/readImg")
public void readImg1(HttpServletRequest request, HttpServletResponse response){
FileInputStream in;
try {
request.setCharacterEncoding("utf-8");
//页面img标签中src中传入的真是图片地址路径
path = "D:\\img\\1.jpg";
String filePathEcode=new String(path.trim().getBytes(), "UTF-8");
response.setContentType("application/octet-stream;charset=UTF-8");
//图片读取路径
in=new FileInputStream(filePathEcode);
// 得到文件大小
int i=in.available();
//创建存放文件内容的数组
byte[]data=new byte[i];
in.read(data);
in.close();
//把图片写出去
OutputStream outputStream=new BufferedOutputStream(response.getOutputStream());
outputStream.write(data);
//将缓存区的数据进行输出
outputStream.flush();
outputStream.close();
} catch (Exception e) {
System.out.println(e.getMessage());
}
}
}
2.2 ボタンをクリックしてローカル イメージを表示または更新します
フロントエンドコード:
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮来改变img标签src属性的值。</p>
<button onclick="myFunction()">试一下</button>
<img id="img" src="" width="200"/>
<script>
function myFunction(){
$.ajax({
type : 'GET',
url : '/readImg',
success : function (){
//请求成功，给照片处可以用下面的方法给src属性赋值
document.getElementById("img").setAttribute("src", "http://127.0.0.1:8080/readImg");
}
});
}
</script>
</body>
</html>
Java バックエンド コード:
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedOutputStream;
import java.io.FileInputStream;
import java.io.OutputStream;
@Controller
public class ShowLocalImg {
@RequestMapping("/readImg")
public void readImg1(HttpServletRequest request, HttpServletResponse response){
FileInputStream in;
try {
request.setCharacterEncoding("utf-8");
//页面img标签中src中传入的真是图片地址路径
path = "D:\\img\\1.jpg";
String filePathEcode=new String(path.trim().getBytes(), "UTF-8");
response.setContentType("application/octet-stream;charset=UTF-8");
//图片读取路径
in=new FileInputStream(filePathEcode);
// 得到文件大小
int i=in.available();
//创建存放文件内容的数组
byte[]data=new byte[i];
in.read(data);
in.close();
//把图片写出去
OutputStream outputStream=new BufferedOutputStream(response.getOutputStream());
outputStream.write(data);
//将缓存区的数据进行输出
outputStream.flush();
outputStream.close();
} catch (Exception e) {
System.out.println(e.getMessage());
}
}
}
指定した名前の画像を表示したい場合は、画像の名前を入力する入力ボックスを追加し、それを URL の背景に渡すことができます。フロントエンド コードは次のとおりです
。
<!DOCTYPE html>
<html>
<body>
<input type="text" id="picName" placeholder="显示图片">
<button onclick="myFunction()">刷新图片</button>
<img id="img" src="" width="200"/>
<script>
function myFunction(){
$.ajax({
type : 'GET',
url : '/readImg?picName='+ $('#picName').val(),
success : function (){
//请求成功，给照片处可以用下面的方法给src属性赋值
document.getElementById("img").setAttribute("src", "http://127.0.0.1:8080/readImg");
}
});
}
</script>
</body>
</html>
バックグラウンドコード:
@RequestMapping("/readImg")
public void readImg(String picName, HttpServletRequest request, HttpServletResponse response){
FileInputStream in;
try {
request.setCharacterEncoding("utf-8");
//页面img标签中src中传入的真是图片地址路径
//String path = request.getParameter("barcode");
path = "D:\\img\\"+picName+".jpg";
String filePathEcode=new String(path.trim().getBytes(), "UTF-8");
response.setContentType("application/octet-stream;charset=UTF-8");
//图片读取路径
in=new FileInputStream(filePathEcode);
// 得到文件大小
int i=in.available();
//创建存放文件内容的数组
byte[]data=new byte[i];
in.read(data);
in.close();
//把图片写出去
OutputStream outputStream=new BufferedOutputStream(response.getOutputStream());
outputStream.write(data);
//将缓存区的数据进行输出
outputStream.flush();
outputStream.close();
} catch (Exception e) {
System.out.println(e.getMessage());
}
}
最終的な効果:
注: プロジェクトでテンプレートを使用しているため、入力ボックスとボタンの表示は上記のコードとは少し異なります。
