使用javascript无法从本地目录识别图像文件？

Question

我在这个位置有图像：

C:\Users\AshwinPC\Desktop\vemployee\src\main\webapp\upload

此图像文件夹中有许多图像。

所以，我使用以下方法加载图像：

 $(document).ready(function(){ loopforData(); function loopForData(){ var newDataList=[]; newDataList=[{"id":1,"iNumber":"i1231223","fullName":"Ashiwn Karki","joinedDate":"10/12/2019","position":"SE","reportsTo":"ASDD","cubicleNo":"23","jobType":"ASAS","fileData":null}]; var text=""; for (var i=0;i<newDataList.length;i++){ var r = newDataList[i]; console.log(r); text +="<div class='col-lg-4 col-md-4 col-sm-4 col-xs-12'>"+ "<div class='box-part text-center'>"+ "<img src='C:\\\\Users\\\\AshwinPC\\\\Desktop\\\\vemployee\\\\src\\\\main\\\\webapp\\\\upload\\\\"+r.iNumber+"'>"+ "<div class='title'>"+ "<h4> Full Name :"+ r.fullName +"</h4>"+ "</div>"+ "<div class='text'>"+ "<span>Inumner : '+newDataList[i].iNumber}+'</span></br>"+ "<span>Joined Date : '+newDataList[i].joinedDate}+'</span></br>"+ "<span>Position : '+newDataList[i].position}+'</span></br>"+ "<span>Reports to: '+newDataList[i].reportsTo}+'</span></br>"+ "<span>Cubicle No: '+newDataList[i].cubicleNo}+'</span></br>"+ "<span>Job Type:'+newDataList[i].jobType}+'</span></br>"+ "</div>"+ "<span>Reports to: newDataList[i].reportsTo}</span>" + "</div>" } console.log(text); $("#abc").html(text); } });

 <div class="row" id="abc"> </div>

此函数填充上面 div 中的数据：

问题是 JS 无法识别我的图像文件的路径。控制台打印为：

如何在 javascript 中加载图像？我使用的是 spring boot。

Answer 1

这是不可能的，虽然我意识到如果您拖放它，浏览器可以打开该图像，但它会在与用于呈现 HTML 和运行 JavaScript 的视口不同的视图窗格中显示它。 视口只能通过 http 请求访问资源。 您必须将其上传到某个地方或设置本地 Web 服务器。 之后，请确保包含文件扩展名（IE .jpg）

想象一下 JS 能够从本地磁盘访问文件的安全风险！ 他们可以将其从页面元素转换为 base64 并将其发送到互联网。