Search code examples
javascriptjqueryasp.netcssvb.net

Remove border from alt text if image url is not valid

Today is friday and this is a fun question (and a real problem). I am using border around the image but if the image url is not valid, the border appears around the alt text and looks kind of ugly. How to remove it using CSS?

<a href="#">
   <img src="http://badsrc.com/blah" style="border:1px solid black" alt="Remove border from this alt text" />
</a>

I don't want to overkill it with server side script or jQuery. Interested in CSS. If no CSS solution is available then other solutions are welcome.

My actual server side script looks like this

If Not String.IsNullOrEmpty(photoURL) Then
   photoUrl2="<img src="..." style="border:1px solid #000" alt="BMW for sale">"
end if

jsfiddle

Solution

  • You can use onerror and set the border

    <a href="#">
 <img src="http://badsrc.com/blah" onerror="this.style.borderWidth=0" style="border:1px solid black" alt="Remove border from this alt text" />
</a>

    It would be better to not use inline styles and use classes

    jsfiddle