Image file not being recognized from local directory using javascript?

Question

I have images inside this location:

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

There are number of images inside this image folder.

So,I am using following method to load the image :

$(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>

This function populates the data inside this above div:

The problem is that JS is not recognizing the path of my image files.The console is being printed as:

How can I load the images in javascript?I am using spring boot.

I would simulate a webserver (e. g. using XAMPP) and put the image file into htdocs-folder — SteffPoint
– SteffPoint, Commented Dec 7, 2019 at 10:09

intellilogic · Accepted Answer · 2019-12-07 10:14:41Z

2

It's not possible, while I realize the browser can open that image if you drag and drop it, it’s displaying it in the view pane that’s different from the viewport used to render HTML and run JavaScript. The viewport can only access resources via http request. You'd have to upload it somewhere or setup local web server. After that, be sure you include the file extension (IE .jpg)

Imagine the security risk of JS being able to access files from your local disk! They could convert it from the page element to base64 and send it off to the interwebs.

edited Dec 7, 2019 at 10:14

answered Dec 7, 2019 at 10:07

intellilogic

426 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Image file not being recognized from local directory using javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related