前言
img的src屬性是前端用來顯示一張圖片的來源，一般情況下src最常見是顯示項目中resources\static問價夾下的圖片，或者顯示公網(wǎng)上的圖片，如果想要在前端顯示本地圖片那要怎么處理呢？如果直接用本地圖片的地址（例如src=“D:\Users\test.jpg”)前端是無法顯示的。
一、HTML 圖像- 圖像標(biāo)簽（ ）
1.1圖像標(biāo)簽的源屬性（Src）
<img> 是空標(biāo)簽，它只包含屬性，并且沒有閉合標(biāo)簽。
要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 “source”。源屬性的值是圖像的 URL 地址。
這表示在前端顯示項目resources\static\img\1.jpg圖片。
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本，在瀏覽器無法載入圖像時，替換文本屬性告訴讀者失去的信息。
1.2圖像標(biāo)簽源屬性（Src）顯示項目中圖片
<img src="img\1.jpg" alt="圖片1" width="710" height="904">
1.3圖像標(biāo)簽源屬性（Src）顯示網(wǎng)絡(luò)圖片
<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">
二、圖像標(biāo)簽（ ）顯示本地圖片
2.1直接顯示本地圖片
<img src="http://127.0.0.1:8080/readImg" alt="圖片1" width="710" height="904">
127.0.0.1是本地ip地址，8080是項目啟動的端口號。
/readImg表示要請求后臺返回一個圖片流。下面是java后臺處理的代碼顯示本地D:\img\1.jpg圖片
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標(biāo)簽中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();
//創(chuàng)建存放文件內(nèi)容的數(shù)組
byte[]data=new byte[i];
in.read(data);
in.close();
//把圖片寫出去
OutputStream outputStream=new BufferedOutputStream(response.getOutputStream());
outputStream.write(data);
//將緩存區(qū)的數(shù)據(jù)進(jìn)行輸出
outputStream.flush();
outputStream.close();
} catch (Exception e) {
System.out.println(e.getMessage());
}
}
}
2.2 點擊按鈕顯示或者刷新顯示本地圖片
前端代碼：
<!DOCTYPE html>
<html>
<body>
<p id="demo">點擊按鈕來改變img標(biāo)簽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標(biāo)簽中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();
//創(chuàng)建存放文件內(nèi)容的數(shù)組
byte[]data=new byte[i];
in.read(data);
in.close();
//把圖片寫出去
OutputStream outputStream=new BufferedOutputStream(response.getOutputStream());
outputStream.write(data);
//將緩存區(qū)的數(shù)據(jù)進(jìn)行輸出
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>
后臺代碼：文章來源：http://www.zghlxwxcb.cn/news/detail-632578.html
@RequestMapping("/readImg")
public void readImg(String picName, HttpServletRequest request, HttpServletResponse response){
FileInputStream in;
try {
request.setCharacterEncoding("utf-8");
//頁面img標(biāo)簽中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();
//創(chuàng)建存放文件內(nèi)容的數(shù)組
byte[]data=new byte[i];
in.read(data);
in.close();
//把圖片寫出去
OutputStream outputStream=new BufferedOutputStream(response.getOutputStream());
outputStream.write(data);
//將緩存區(qū)的數(shù)據(jù)進(jìn)行輸出
outputStream.flush();
outputStream.close();
} catch (Exception e) {
System.out.println(e.getMessage());
}
}
最終效果：
注意：由于在項目中使用了模板，所以input框和按鈕顯示會跟上述代碼中有點不一樣。
文章來源地址http://www.zghlxwxcb.cn/news/detail-632578.html
到了這里，關(guān)于js修改img的src屬性顯示變換圖片到前端頁面，img的src屬性顯示java后臺讀取返回的本地圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
