Is it possible to show an alternate image if the original source file is not found?
I would like to achieve this only with css and html, no javascript (or jQuery and alike).
The idea is to still show an image instead of the "alt" test or default (ugly) cross of IE.
If not possible without javascript I will then rather check the img src with php with a basic if-then-else.
Very simple and best way to achieve this with little code
<img class="avatar" src="img/one.jpg" alt="Not Found" onerror="this.src='img/undefined.jpg';">
To me the above works perfect!
You can do this using the CSS background-image property of the img element, i.e.
img
{
background-image:url('default.png');
}
However, you have to give a width or height for this to work (when the img-src is not found):
img
{
background-image:url('default.png');
width:400px;
}
<object data="foobar.png" width=200 height=200>
<img src="test.png" alt="Just testing.">
</object>
Here foobar.png is the primary image, test.png is the fallback image. By the semantics of the object element, the content of the element (here the img element) should be rendered if and only if the primary data (specified by the data attribute) cannot be used.
Though browsers have had awful bugs in implementations of object in the past year, this simple technique seems to work on modern versions of IE, Firefox, Chrome.
yes, you can do it by using only html, when img src not found then it will throw error so here we can handle it. One more point is set this.onerror = null for recursive calling (default image not found)
<img alt="User Image" class="user-image" src="/Resources/images/user-icon.png" onerror="this.onerror=null; this.src='/Resources/images/default_img.png'">
Related
I'm playing around with a basic Dot-Net web assembly application. In the application I'm displaying two images using two different image tags image and img. The size of the image is bound to a private variable Size. I've noticed a problem where images do not render in a specific scenario using the image tag.
Replication:
dotnet new blazorwasm
I downloaded the SVG from: Bootstrap icons, then I placed the SVG file in "wwwroot/Media/".
In index.razor I've updated the code as follows:
#page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<img src="Media/search.svg" alt="Bootstrap" width="#Size" height="#Size">
<image src="Media/search.svg" alt="Bootstrap" width="#Size" height="#Size"/>
#code
{
private static string Size => "75";
}
The result of running the above code shows only one image displaying
Through process of elimination, the image defined using the image tag is the problem here. If you tweak the code to use hardcoded values i.e.
<image src="Media/search.svg" alt="Bootstrap" width="75" height="75"/>
then the code works again as expected.
I'm aware that <image> is deprecated, but I'd like to understand if the reason the binding breaks the image displaying is due to the deprecation or something else?
Update
The generated HTML using the template is
<!--!--><div class="top-row px-4" b-vv8m6rf2se="">About</div>
<article class="content px-4" b-vv8m6rf2se=""><!--!--><!--!--><!--!--><!--!-->
<!--!--><h1 tabindex="-1">Hello, world!</h1>
Welcome to your new app.
<img src="Media/search.svg" alt="Bootstrap" width="75" height="75">
<image src="Media/search.svg" alt="Bootstrap" width="75" height="75"></image></article>
An interesting find, although of course not of any practical value, just use <img>.
I could easily reproduce this with a jpg image so it's not about svg.
Now for a speculative answer:
Blazor treats <image> like any other tag and the generated HTML looks like expected. But according to this answer,
The HTML5 parsing spec requires that the tag is mapped to the img element at the tree construction stage
This makes me think that when the complete tag is rendered just once it works fine, handling is up to the browser.
But after Blazor has filled in the #Size it will try to update the HTML it generated earlier. If the Browser really changed <image> to <img> internally then the JS Bridge will have trouble finding the element again and the updates fail.
The image with invalid source displays an alternate text in Firefox but not in chrome unless the width of an image is adjusted.
<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Image Not Found"/>
How to display the alt text for an image?
If I'm correct, this is a bug in webkit (according to this). I'm not sure if there is much you can do, sorry for the weak answer.
There is, however, a work around which you can use. If you add the title attribute to your image (e.g. title="Image Not Found") it'll work.
You can use the title attribute.
<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Google Images" title="Google Images" />
Yes it's an issue in webkit and also reported in chromium: http://code.google.com/p/chromium/issues/detail?id=773
It's there since 2008... and still not fixed!!
I'm using a piece of javacsript and jQuery to make my way around this.
function showAlt(){$(this).replaceWith(this.alt)};
function addShowAlt(selector){$(selector).error(showAlt).attr("src", $(selector).src)};
addShowAlt("img");
If you only want one some images:
addShowAlt("#myImgID");
Use title attribute instead of alt
<img
height="90"
width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg12.gif"
title="Image Not Found"
/>
Here is a simple workaround in jQuery. You can implement it as a user script to apply it to every page you view.
$(function () {
$('img').live('mouseover', function () {
var img = $(this); // cache query
if (img.title) {
return;
}
img.attr('title', img.attr('alt'));
});
});
I have also implemented this as a Chrome extension called alt. Because it uses jQuery.live, it works with dynamically loaded content, too. I have retired this extension and removed it from the Chrome store.
Various browsers (mis)handle this in various ways. Using title (an old IE 'standard') isn't particularly appropriate, since the title attribute is a mouseover effect. The jQuery solution above (Alexis) seems on the right track, but I don't think the 'error' occurs at a point where it could be caught. I've had success by replacing at the src with itself, and then catching the error:
$('img').each(function()
{
$(this).error(function()
{
$(this).replaceWith(this.alt);
}).attr('src',$(this).prop('src'));
});
This, as in the Alexis contribution, has the benefit of removing the missing img image.
Internet Explorer 7 (and earlier) displays the value of the alt attribute as a tooltip, when mousing over the image. This is NOT the correct behavior, according to the HTML specification. The title attribute should be used instead. Source: http://www.w3schools.com/tags/att_img_alt.asp
To display the Alt text of missing images, we have to add a style like this. I think, there is no need to add extra javascript for this.
.Your_Image_Class_Name {
font-size: 14px;
}
It's work for me. Enjoy!!!!
You can put title attribute to tag.I hope it will work.
<img src="smiley.gif" title="Smiley face" width="42" height="42">
This can be entered in the javascript console to replace empty titles with alt text (if available) for images on a single page:
[...document.getElementsByTagName('img')].forEach((x) => {
if(x.getAttribute('alt') && !x.getAttribute('title')){
x.setAttribute('title',x.getAttribute('alt'));}})
It doesn't require JQuery.
I use this, it works with php...
<span><?php
if (file_exists("image/".$data['img_name'])) {
?>
<img src="image/<?php echo $data['img_name']; ?>" width="100" height="100">
<?php
}else{
echo "Image Not Found";
}>?
</span>
Essentially what the code is doing, is checking for the File. The $data variable will be used with our array then actually make the desired change. If it isn't found, it will throw an Exception.
I am trying to build an email template in which i have to show some images to different mail client (eg.. outlook, thunderbird...). Now problem is when these clients does not allow to show image at that time broken image box is displaying which i don't want to display.
I had also refer
Refered link 1: How to remove borders around broken images in webkit?
Refered link [2]: input type="image" shows unwanted border in Chrome and broken link in IE7
Refered link [3]: How to stop broken images showing
but not able to find any proper output.
Note : I can not use div tag. I must have to use table tags.
CODE What I am using :
<table style="background:#fff; width:600px; margin:auto auto;">
<tr>
<td>
<a href="http://www.sampleurl.com">
<img src="http://sampleimageurl.com/sampleimage.png" height="55" width="198" />
</a>
</td>
<td style="text-align:right;"><a href="http://www.sampleurl.com" target="_blank">
<span style="font-family:Myriad Pro; color:#0d5497; font-size:20px;">www.sampleurl.com</span>
</td>
</tr>
<!--<tr>
<td colspan="2" style="height:1px; background: #0d5497;"></td>
</tr>-->
OUTPUT what i get.
use alt here for fallback
demo
html
<img src="abc" alt="image" />
css
img {
width:200px;
height:200px;
}
Alternatively, if you dont want to show any alt text, just give a blank space.
demo here
HTML
<img src="abc" alt=" " />
I know I'm late to the party but I didn't see a simple solution that used native javascript. Here is the solution I came up with
<img src="https://test.com/broken-image.gif" onerror="arguments[0].currentTarget.style.display='none'">
onerror calls a function, passing an error event as an argument. Because the argument is not actually defined as 'error' we need to get it from the arguments array that all functions have. Once we have the error we can get the currentTarget, our img tag, and sent the display to none.
I think you can use on error event on img.
here is a simple solution
Please pay attention that this script uses onDomReady event. In this case you should write:
<script type="text/javascript">//<![CDATA[
$(function(){
$('img').on('error', function () {
$(this).remove();
})
});//]]>
</script>
UPDATE
Why do you load images ? You can attach this image to email and show it via CID
You could any other element instead of and IMG and set the background-image using CSS. If that image is not found, you will not get the strange looking box.
<span style="background-image:url('http://sampleimageurl.com/sampleimage.png'); display:inline-block; width:198px; height:55px">
element with background
</span>
Sounds like a tough call not being allowed to use ALT text
If whoever is making this decision is convinced by a bit of styling you can do that e.g.
<img src="logo.jpg" width="400" height=”149″ alt="Company Name" style="font-family: Georgia; color: #697c52; font-style: italic; font-size: 30px; background:#ccffcc">
see http://jsbin.com/IcIVubU/1/
use this code block in your mail content to keep unrendered image as hidden.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<img id="imgctrl" src="imgs/sandeep11.png" onerror="$('#' + this.id).hide();" alt="Alternate Text" />
concept is.. use any CDN jquery reference then only jquery code will work. and I guess your src image path also should be some live url. if not then, it should be in attachment.
Please Click on "Show Remote content" to get remote urls into
thunderbird. this is security constraint of thunderbird. that's why
your images are not being loaded.
I know it is an old question but I found I had this problem too today (08 January 2020) and found a way to get around it.
I tested with the latest versions of Firefox and Chrome, I still could not find a solution for Safari.
Firefox:
For firefox you must add alt=" " note the space
Chrome:
For Chrome it must be alt="" note the empty space
The problem is that when I add the space the icon shows up on Chrome and disappears on Firefox, and vice versa when I remove it.
I added just a space because I did not want any text showing up on the image.
I did not have to add any of the following lines for it to work (I saw many solutions proposing some or all of them), but I left them in just in case
border: none;
outline: none;
border-image: none;
From there I guess it would be detecting a the browser in JavaScript and changing the alt attribut to " " or "".
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('img').forEach(function(img){
img.onerror =function(){this.parentNode.removeChild(this);
})});
DEMO
you can remove img by javascript:
arr = document.getElementsByTagName("img");
for(i=0; i<arr.length; i++){
if(arr[i].src=="")
arr[i].parentElement.removeChild(arr[i]);
}
I've started using Bootstrap for a project, and in particular, the Thumbnails component. On the thumbnails example on the documentation, the following sample code is shown:
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img data-src="holder.js/300x200" alt="">
</a>
</li>
...
</ul>
Notice the use of data-src to replace the usual src attribute on the <img> tag.
I assumed that to get my thumbnails working, I should use data-src instead of src for the images, but that does not seem to be the case. I've only been able to load images by defining the src attribute. It seems others are having the same problem.
Is this a typo in the documentation, or did I not understand correctly how to use data-src?
I believe that the only reason of why bootstrap guys are using data-src instead src, it's because of holder.js. You should use src instead of data-src because data-src is only used for the javascript library that generates the example images of a certain size, and src is the normal attribute for specifying the location of an image (Source: W3C)
Why are they using in the documentation data-src? I suppose that even the syntax <img src="holder.js/100x200"></img> is accepted by the library as it is in the holder.js documentation, when we access to the page it throws a 404 error in the image even when the image is displaying, because there is not any file in the specified path, what it's weird.
Why do they put that in the documentation code? I really don't know. Probably it's a mistake. But I am sure that you should use src instead data-src in thumbnails.
How to use it
Include holder.js in your HTML:
<script src="holder.js"></script>
Holder will then process all images with a specific src attribute, like this one:
<img src="holder.js/200x300">
The above tag will render as a placeholder 200 pixels wide and 300 pixels tall.
To avoid console 404 errors, you can use data-src instead of src.
Holder also includes support for themes, to help placeholders blend in with your layout. There are 6 default themes: sky, vine, lava, gray, industrial, and social. You can use them like this:
<img src="holder.js/200x300/industrial">
Bootstrap uses Holder for thumbnails in its documentation.
It's pretty well explained on the Holder github page.
Include holder.js in your HTML. Holder will then process all images with a specific src attribute... The tag will render as a placeholder. To avoid console 404 errors, you can use data-src instead of src.
In order for me to get this to work, I had to call the run() function in holder.
I am using require to load backbone views, inside my view I include holder
var Holder = require('holderjs');
Then inside render I can run
Holder.run();
And in my template I have
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/200x200/text:hello world">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
Hope that helps.
I couldn't figure it out either, as far as I understand it holder.js is actually a completely separate js file to act as an img placeholder from http://imsky.github.io/holder/
data-src is used to pass to the javascript, the /100x200 is the dimension of the picture you want the javascript 'holder.js' to take up for the real img.
I think the idea is to prototype using this (data-src="holder.js/300x200") and then replace it with sized pictures (src="Logo.png") afterwards.
For future Googlers looking for how to use with NPM/build jobs this worked in my case:
window.Holder = require('holderjs').default;
The image with invalid source displays an alternate text in Firefox but not in chrome unless the width of an image is adjusted.
<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Image Not Found"/>
How to display the alt text for an image?
If I'm correct, this is a bug in webkit (according to this). I'm not sure if there is much you can do, sorry for the weak answer.
There is, however, a work around which you can use. If you add the title attribute to your image (e.g. title="Image Not Found") it'll work.
You can use the title attribute.
<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Google Images" title="Google Images" />
Yes it's an issue in webkit and also reported in chromium: http://code.google.com/p/chromium/issues/detail?id=773
It's there since 2008... and still not fixed!!
I'm using a piece of javacsript and jQuery to make my way around this.
function showAlt(){$(this).replaceWith(this.alt)};
function addShowAlt(selector){$(selector).error(showAlt).attr("src", $(selector).src)};
addShowAlt("img");
If you only want one some images:
addShowAlt("#myImgID");
Use title attribute instead of alt
<img
height="90"
width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg12.gif"
title="Image Not Found"
/>
Here is a simple workaround in jQuery. You can implement it as a user script to apply it to every page you view.
$(function () {
$('img').live('mouseover', function () {
var img = $(this); // cache query
if (img.title) {
return;
}
img.attr('title', img.attr('alt'));
});
});
I have also implemented this as a Chrome extension called alt. Because it uses jQuery.live, it works with dynamically loaded content, too. I have retired this extension and removed it from the Chrome store.
Various browsers (mis)handle this in various ways. Using title (an old IE 'standard') isn't particularly appropriate, since the title attribute is a mouseover effect. The jQuery solution above (Alexis) seems on the right track, but I don't think the 'error' occurs at a point where it could be caught. I've had success by replacing at the src with itself, and then catching the error:
$('img').each(function()
{
$(this).error(function()
{
$(this).replaceWith(this.alt);
}).attr('src',$(this).prop('src'));
});
This, as in the Alexis contribution, has the benefit of removing the missing img image.
Internet Explorer 7 (and earlier) displays the value of the alt attribute as a tooltip, when mousing over the image. This is NOT the correct behavior, according to the HTML specification. The title attribute should be used instead. Source: http://www.w3schools.com/tags/att_img_alt.asp
To display the Alt text of missing images, we have to add a style like this. I think, there is no need to add extra javascript for this.
.Your_Image_Class_Name {
font-size: 14px;
}
It's work for me. Enjoy!!!!
You can put title attribute to tag.I hope it will work.
<img src="smiley.gif" title="Smiley face" width="42" height="42">
This can be entered in the javascript console to replace empty titles with alt text (if available) for images on a single page:
[...document.getElementsByTagName('img')].forEach((x) => {
if(x.getAttribute('alt') && !x.getAttribute('title')){
x.setAttribute('title',x.getAttribute('alt'));}})
It doesn't require JQuery.
I use this, it works with php...
<span><?php
if (file_exists("image/".$data['img_name'])) {
?>
<img src="image/<?php echo $data['img_name']; ?>" width="100" height="100">
<?php
}else{
echo "Image Not Found";
}>?
</span>
Essentially what the code is doing, is checking for the File. The $data variable will be used with our array then actually make the desired change. If it isn't found, it will throw an Exception.