Change scr for Image element after upload image in ASP.NET Core

1 Answer 51 Views
General Discussions Upload
Abdulsalam Elsharif
Top achievements
Rank 2
Iron
Iron
Abdulsalam Elsharif asked on 13 Sep 2021, 10:29 AM

Hello

I used Upload tool to upload person image, I put an HTML Image element beside the Upload image tool, I want to display the image after upload it.

I invoke .Success event for upload tool and used a javascript function to set the src attribute for the image element with the uploaded image path.

This is the Image element

<img id="imgPerons" src="" width="200" height="250">

This is the javascript function:

function onSuccess(e) {
        var files = e.files[0];

        if (e.operation == "upload") {
            document.getElementById("imgPerson").src = "~/images/person_photos";
        }
    }

I think I have a problem with the path of the image, because I tried to used online images like the following, It works fine

function onSuccess(e) {
        var files = e.files[0];

        if (e.operation == "upload") {
            document.getElementById("imgPerson").src = "https://www.xxx.com/image.jpeg";
        }
    }

What's the wrong with the path of the image?

I saved uploaded image in wwwroot/images/person_photos , 
The Image element and the javascript function in the path Views/Home/Index.cshtml

Any Help

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 16 Sep 2021, 08:09 AM

Hi Abdulsalam,

Thank you for the code snippets and details provided.

In order to achieve the desired behavior, I would recommend trying to set the absolute path to the image and not the relative one.

Give a try to the approach above and let me know if the issue persists.

Looking forward to hearing back from you.

 

Kind Regards,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions Upload
Asked by
Abdulsalam Elsharif
Top achievements
Rank 2
Iron
Iron
Answers by
Anton Mironov
Telerik team
Share this question
or