How to pass a value in src=“@url.content” using javascript or jquery

Question

<script>

    var Details = function (Id, username, Empname, UserType, Address, Gender, Mob, image) {
        $("#hiddenEmployeeId").val(Id);
        $("#EditModal").modal("show");
        $("#susertype").html(UserType);
        $("#saddress").html(Address);
        $("#sgender").html(Gender);
        $("#smob").html(Mob);
        $("#suname").html(Empname);
        $("#sename").html(username);
    }


</script>

Getting value from from a image variable form above that script

<img src="@Url.content("")" />

i have to place in this img

Answer 1

you can not use javascript variable directly. so you have to manage your image path like below.

<script>    
    var Details = function (Id, username, Empname, UserType, Address, Gender, Mob, image) {
        $("#hiddenEmployeeId").val(Id);
        $("#EditModal").modal("show");
        $("#susertype").html(UserType);
        $("#saddress").html(Address);
        $("#sgender").html(Gender);
        $("#smob").html(Mob);
        $("#suname").html(Empname);
        $("#sename").html(username);
        $("#image").attr("src",@Url.content("~/")image);
    }
</script>
<img id="image" />

Answer 2

give class or Id to img as below

<img class="img" src="@Url.content("")" />

and than set attribute value using class or ID as below

$(".img").attr("src","xyz");

For this example i have used class you can also use ID for the same

Answer 3

I kind of have the similar problem you're facing: I have JavaScript code that runs after page loads to bring a list of items, and each might have a thumbnail which is stored under wwwroot (asp.net core 2.0 speaking).

I can't just build <a href="THE_PATH" download /> whose path is coming from the JavaScript code because for security reasons on some modern browsers, ie, you will get an error Not allowed to load local resource .

Ideally you (wish you) can use <a href="@Url.Content("THE_PATH")" /> to get the content from the Server and the problem solved. But you can't inject the PATH into @Url.Content() because @Url.Content() executes first on the server side and it would be too late when you inject the path from the JavaScript code.

Option 1

Store the image/thumbnail as a record in the database with an identifier (GUID works the best), and on the page build a link that corresponds an Controller and an Action that fetches the image by id and returns its content as file result, ie, return File(); .

Option 2 (with ASP.NET Core 2.0)

Store the image/thumbnail physically in your web root folder, ie, wwwroot/images and enable static file by putting app.UseStaticFiles() on the Configure() method in Startup.cs .

Then you can build your image with your JavaScript variable like

<img src="{{ SOME_JS_VARIABLE_THAT_HOLDS_RELATIVE_PATH }}" />

The relative path might look like something like /uploads/2018/1/1/pic1.jpg , without the content root.