Share via

Fetch a image from file folder in javascript

Question

Wednesday, March 10, 2021 7:51 PM

 I want to retrieve a image file to display in my drag and drop feature. I have tried the solution below with no luck?


function OnDragStart(e) {
            
             
                //document.createElement('img');

                //img.src = "image/economie.png";
            
                var img = new Image();
               img.src="images/InitialImage.png"
               
                if (e.dataTransfer.setDragImage) {
                    e.dataTransfer.setDragImage(img , 0, 0);

                }

All replies (7)

Wednesday, March 31, 2021 8:23 AM âś…Answered

Hi peterthegreat,

In this method you are trying, the src attribute of the img element indicates that it will request resources under the local project, and you will see its request path under the network.

A simple test:

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
            $(document).on('click', function () {
                var img = new Image();
                img.src = "img/flower.png"
                document.body.appendChild(img);
            });
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            
        </div>
    </form>
</body>

Result:

Or you can request a resource under an online server, such as some image sharing websites, or you can use base64 format data resources.

Of course it all depends on your requirements.

Best regards,

Xudong Peng

Wednesday, March 10, 2021 8:04 PM

Use the browsers network trace to see the actual url setting the image src fetched. You specified relative to the current base url. Maybe that is not correct.

Thursday, March 18, 2021 9:16 AM

Hi peterthegreat,

I want to retrieve a image file to display in my drag and drop feature. I have tried the solution below with no luck?

Based on your current code alone, I am afraid I cannot determine your current problem. Are you unable to drag the image element? Or does it mean that the image cannot be displayed correctly?

If possible, could you provide more details?

Best regards,

Xudong Peng

Sunday, March 21, 2021 9:33 PM

i was not sure if it was possible to retrieve a image from serverside using javascript according to information source?

Sunday, March 21, 2021 9:39 PM

where do you see the src url in browser? is it in developer tools?

Monday, March 22, 2021 10:27 PM

yes, under network

Sunday, March 28, 2021 8:22 PM

IT does not show such information other than list of files. rather ambiguous code.

  • Last updated on