Change src attribute for Image element after upload image in ASP.NET Core-CodePudding

I used upload tool for ASP.NET Core to upload person image, I put an HTML Image element beside the Upload image tool 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. But unfortunately it does not work :(

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/image.jpeg";
    }
}

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

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

    if (e.operation == "upload") {
        document.getElementById("imgPerson").src = "https://www.example.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

CodePudding user response：

Removing ~ sign in javascript code should fix the problem because it's only processed on ASP.NET Core side

document.getElementById("imgPerson").src = "/images/person_photos/image.jpeg";