CODEWITHSUNDEEP
javascripthtml
Random guy
Random guy

Reputation: 923

Image file not being recognized from local directory using javascript?

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: enter image description here

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

Upvotes: 0

Views: 47

Answers (1)

intellilogic
intellilogic

Reputation: 42

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.

Upvotes: 2

Related Questions