Broken asp:image in safari browser

时间:2015-11-12 11:47:06

标签: javascript html asp.net vb.net safari

I am using ASP.net image tags like this.

<asp:Image ID="Image6" runat="server" ImageUrl='<%#Eval("DeviceStatusFlag")%>' alt=''/>

Now when the ImageURL is blank then normally a broken image shows up in some browsers like Firefox but after using the ält='' these browsers show up nothing in place of images which is alright. But in Safari browser i still see a ? mark image icon when the ImageURL is empty.

Also tried using this ,

 <asp:Image ID="Image6" runat="server" ImageUrl='<%#Eval("DeviceStatusFlag")%>' AlternateText = '' GenerateEmptyAlternateText='true' />

But it does not work on Safari as well.

How to fix this for Safari ?

1 个答案:

答案 0 :(得分:1)

Firstly I doubt it's an asp:image issue, if you replace it with a standard HTML img tag I can imagine it would do the same.

Clearly safari wants to render empty an src attribute that way. You could use JavaScript to hide it if it is empty, or add a transparent image instead of nothing.

Personally I don't think it's good practice to have an empty image src.

You could also use a div, with a background-image src, that would handle none as a setting.

Edit: And an alt tag is alternate text for images being turned off or for accessibility. Whilst that may change the behaviour in some browsers, that's not its intent.

Edit 2.

To hide your asp.net server control.

<asp:Image ID="Image6" runat="server" visible="False" ImageUrl='<%#Eval("DeviceStatusFlag")%>' alt=''/>

Its probably easier for you to change both the ImageUrl and Visible on the server side.

<asp:Image ID="Image6" runat="server">

Such as:

Image6.Visible = False
Image6.ImageUrl = DeviceStatusFlag

OR

To get the actual rendered url of the <img tag being rendered.

Use

Image6.ClientID

You can embed that easily into the HTML as follows:

<script>

function setImageVisibility() {
  var imageID = "<%=Image6.ClientID%>",
      imageElement = document.getElementById(imageID);

  if(imageElement) {
     if(imageElement.src === "") {
           imageElement.style.visibility = "hidden";
     }
  }

}

setImageVisibility();

</script>