i have a web app written in aspx.
I have a img control.
If a required image is not available then the alt text message displays.
Is there a way to set an 'alt image' instead? This img control relies on updates so after a default period of 10 seconds if no image is acquired then I would like to set a default image instead. It would be handy if there was a property like 'alt image'.
I guess I could use a timer to check but would be interested in other approaches.
Thanks
The onerror attribute can execute js and set a new image like shown below
<img src="/images/200.png" onerror="this.src='/images/404.png'" >
Related
When you load a grid of images there is a chance that one or more images are not found. In those cases, I do not want to show a blank space or an ugly browser-default "Image Not Found"-icon. Instead, I want to show a default image or some kind of thumbnail.
One way to achieve this is to use the onerror-tag like this:
<img src="example.png" onerror="this.onerror=null;this.src='not-
found.jpg';" alt="Some example image I expect to load!" />
When an error occurs, e.g the image resource is not found, the onerror-tag is executed and the src of the image is set to a default not-found image. this.onerror=null is to avoid an infinite loop in case the not-found image is also not found.
But this method seems to be deprecated.
Every Google result shows the onerror-method when I search on how to handle not-found images like this.
So, what would be the best way to show a default image when an image is not found?
I thought that <picture> worked like this, but it doesn't.
<picture>
<source srcset="example.webp" type="image/webp">
<source srcset="example.jpg" type="image/jpeg">
<img alt="" src="not-found.jpg">
</picture>
Use the GlobalEventHandler onerror instead: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
When a resource (such as an <img> or <script>) fails to load, an error
event using interface Event is fired at the element that initiated the
load, and the onerror() handler on the element is invoked. These error
events do not bubble up to window, but can be handled with a
EventTarget.addEventListener configured with useCapture set to true.
I am using Vue Material Design Icons ref, and they automatically have a title attribute set - by default it is a human readable form of the icon's name, e.g. Plus Icon. Because this is being imported directly from the Node Package, I don't want to mess with the components themselves. I also know that I could write some custom JS to fix it, but I don't really want to do that.
Is there a standard way to disable the title attribute during component registration or in some other fashion that doesn't add a performance cost or require any patchwork code?
note: I'm also using Webpack if this can be done that way.
From the link you've provided, that icon component provides a prop where you can set the title to whatever you wish if you don't want to use the default.
Props
title - This changes the hover tooltip as well as the title shown to screen readers. By default, those values are a "human readable"
conversion of the icon names; for example chevron-down-icon becomes
"Chevron down icon".
Example:
<android-icon title="this is an icon!" />
I added AMP-Pinterest to my AMPed page. I'd like to set the propery
data-pin-hover="true" to get the PinIt button on the image. For some reason it doesn't work.
Here is what I have so far:
That's in <head>:
<script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>
(and of course other AMP stuff)
That's in <body>:
<amp-pinterest height=28 width=56
data-do="buttonPin"
data-url="URL"
data-media="IMG_URL"
data-pin-hover="true"
data-description="DESC">
</amp-pinterest>
I also added data-pin-nopin="false" and data-pin-no-hover="false" to my amp-img's declaration (just in case, if it's not by default set to false. More info here: https://www.ampproject.org/docs/reference/components/amp-pinterest):
<amp-img alt="NAME" src="IMG_URL" width="600"
height="400" layout="responsive" data-pin-nopin="false"
data-pin-no-hover="false" />
But it still doesn't work (the PinIt button shows up above/below amp-img).
Question:
Now I'm wondering if I did something wrong or it's simply not supported using AMP-Pinterest to hover an image? (I can't find any example).
Unfortunately, this option doesn't to be available for amp-pinterest at the moment (going through the docs and other examples). However, if you don't prefer for the Pin It button to not appear above or below, you can instead have it embedded in the image, as seen in the amp-pinterest samples:
Embed pin widget
To embed the pin widget, set data-do to embedPing. The data-url attribute must contain the fully-qualified URL of the Pinterest resource.
I would like to set an image as nothing. By doing src="" many people say it can cause problems to browsers:
http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/
so I am not sure if below can face to the same problem as setting src to empty:
<img id="myImage">
since there's no src attribute on this case.
So If I want to initially set an image to nothing, what's the best I can do?
Best solution
Initialise the image as follows: src="//:0" like here: <img id="myImage" src="//:0">
Edit: as per the comment of Alex below, using //:0 apparently can trigger the onError event of the img. So beware of this.
Edit 2: From comment by Drkawashima: As of Chrome 61 src="//:0" no longer seems to trigger the onError event.
Other solution
Alternatively, you can use a very small image until you actually fill the src tag: like this image. With this 'very small image', you would then initialise the tag like so:
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="" />
source
Remove element from DOM
Alternatively, if you simply don't want the element to appear in the DOM, just use some JavaScript:
var myObject = document.getElementById('myObject');
myObject.parentNode.removeChild(myObject);
(as per this answer, using JavaScript's .remove() function is not recommended, due to poor browser support in DOM 4)
Or just use some jQuery:
$("#myObject").remove();
Using a 1px transparent encoded image is an accepted solution (recommended by CSSTricks)
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">
PS: Don't be confused later when DevTools shows these as network requests of zero bytes, that's just how DevTools works, all imgs are listed as network requests.
DS: alt="" is included because otherwise, screenreaders will read the src out loud
Just use a hash symbol #. It's valid value for src attribute. :)
https://stackoverflow.com/a/28077004/3841049
Use this script to set a default image if src is empty or blank
$(document).ready(function () {
$('img').each(function () {
if($(this).attr('src')=="") {
$(this).attr('src', 'Images/download.jpg');
}
});
});
Is there a way to control the load order of images on a web page? I was thinking of trying to simulate a preloader by first loading a light-weight 'LOADING' graphic. Any ideas?
Thanks
Use Javascript, and populate the image src properties later. The # tells the browser to link to a URL on the page, so no request will be sent to the server. (If the src property was empty, a request is still made to the server - not great.)
Assemble an array of image addresses, and recurse through it, loading your images and calling a recursive function when the onload or onerror method for each image returns a value.
HTML:
<img src='#' id='img0' alt='[]' />
<img src='#' id='img1' alt='[]' />
<img src='#' id='img2' alt='[]' />
JS:
var imgAddresses = ['img1.png','img2.jpg','img3.gif'];
function loadImage(counter) {
// Break out if no more images
if (counter==imgAddresses.length) { return; }
// Grab an image obj
var I = document.getElementById("img"+counter);
// Monitor load or error events, moving on to next image in either case
I.onload = I.onerror = function() { loadImage(counter+1); }
//Change source (then wait for event)
I.src = imgAddresses[counter];
}
loadImage(0);
You could even play around with a document.getElementsByTagName("IMG").
By the way, if you need a loading image, this is a good place to start.
EDIT
To avoid multiple requests to the server, you could use almost the same method, only don't insert image elements until you're ready to load them. Have a <span> container waiting for each image. Then, loop through, get the span object, and dynamically insert the image tag:
var img = document.createElement("IMG");
document.getElementById('mySpan').appendChild(img);
img.src = ...
Then the image request is made only once, when the element is created.
I think this article https://varvy.com/pagespeed/defer-images.html gives a very good and simple solution. Notice the part which explains how to create "empty" <img> tags with:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">
to avoid <img src="">
To display a loading image, just put it in the HTML and change it later at the appropriate moment/event.
Just include the 'loading' image before any other images. usually they are included at the very top of the page and then when the page loading completes, they are hidden by a JS.
Here's a small jQuery plugin that does this for you: https://github.com/AlexandreKilian/imageorder