How to Load image from JavaScript-CodePudding

I added notifications to my web application.

This is the JavaScript that runs and shows the notifications on the notification bar.

With the notification, I want to show a notification icon for each line.
When I run the program, the image does not show.

This is how I tried to add the image:

$("#menu1").append('<li> <a> <span class=image><img src ="~/Theme/production/images/Annon.png"/> </span> <span>'   value.Ndetails   '</li><hr/>');

This is the full code:

function LoadData() {
  $('#menu1').empty();
  $('#menu1').append($('<li> Loading.. </li>'));
  $.ajax({
    type: 'GET',
    url: $("#Get").val(),
    dataType: 'json',
    data: {},
    success: function (data) {
      if (data.Success == true) 
        $('#menu1').empty();
        if (data.listNoti.length == 0) {
          $('#menu1').append($('<li>There is nothing to show </li>'));
        }
        $("#notiCount").empty();
        $("#notiCount").append(data.listNoti.length);
        $.each(data.listNoti, function (index, value) {
          $("#menu1").append('<li> <a> <span class=image><img src ="~/Theme/production/images/Annon.png"/> </span> <span>'   value.Ndetails   '</li><hr/>');
        });
        $("#menu1").append('<li><button onclick="ClearNotifications();"style="border:none;background-color: transparent;"><i ></i> Clear All Notifications</button></li>')
      }
    }
  });
}

CodePudding user response：

Looks like you provided bad relative path

<img src ="~/Theme/production/images/Annon.png"/>

Instead that, try this way

<img src ="./images/Annon.png"/>

First try to make an individual folder for your project
Then add all of your assets like images,audio,etc to that folder

Pictorial reference: click this link to see an example for good relative path