- Published on
Hiding a "N/A" value of a src attribute of an img tag from an API
- Authors
- Name
- interglobalmedia
- @letsbsocial1
- Link to Hiding an "N/A" value of a src attribute of an img tag from an API podcast on anchorfm
Don't you hate it when you receive an image from an API
and the value
of the src
attribute is "N/A"
(or some other similar value)?
Well, that happened to me the other day. I was working on course content for my Dynamic Web 1
class I am teaching at the New York City College of Technology
(City Tech
in Brooklyn), and I noticed that there were quite a few responses from the OMDB API
which contained placeholder images
because there was no actual image
available.
This kind of thing really uglifies an application, and I wanted to remove them from the response stream
when present.
The solution is very simple really, and I have not come across it anywhere yet.
Anyway, all you have to do is figure out what the value
of the img
tag's src
attribute is and then add the following to your CSS
:
[src='N/A'] {
display: none;
}
For the API
I was working with, the img
tag returned
from the API
contains the src
attribute value
of 'N/A'
, so it was simple to set its display
property to 'none'
.
Sometimes a broken img
path is passed as the value
to the src
attribute, so those still appear with the alternate placeholder
image. In cases like that, you have to use a bit of JavaScript
. I use the following code to set the broken image's display
property to 'none'
:
// remove img src broken links
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('img').forEach(function (img) {
img.onerror = function () {
this.style.display = 'none'
}
})
})
The way that you can quickly check whether the code
actually works or not is by adding an img
tag to your html
with a fake image, and then checking whether or not the placeholder image of 16w x 16h
shows up or not on the page. For example, I added the following to my results.ejs
page in my Node.js
application:
<img src="alt.jpg" alt />
And the following showed up in my html
Elements tab
in the Developer Tools Console
:
And the page looked like the following in the browser
(no alternate
default placeholder image
):
So there are two scenarios one has to cover. First is when there is no image available, which can be solved with pure CSS
. And the other is when the value
of the image src
attribute is a broken link. That has to be solved with JavaScript
.
onerror property breakdown
onerror
is a property of the GlobalEventHandlers
and is an EventHandler
that processes error
events.
Error
events are fired on various targets for various types of errors
. In our case, it is due to a broken link or path passed as a value
of an image src
attribute.
When an image fails to load
for whatever reason, an error
event is fired on the img
element that initiated the load
, and the onerror()
handler on the element is invoked.
Basically, I am setting the onerror
property on the img
element and initializing its value
with an anonymous
function. It is inside the body
of this function that I set thestyle.display
property to 'none'
.
Now this approach works in Firefox
and Chrome
just fine. But when I went to check it in Safari
, it did NOT work. A small placeholder image still appears. That's because Safari
does not support completely the onerror
property. I'm willing to stick with my solution for now anyway, as the occurrence is extremely low. If I had tried to replace the src
attribute to "N/A"
onerror
, which would work in Safari
, then I would end up with absolutely NO IMAGES. To learn more about which browsers are compatible with the onerror
property, please visit quirksmode.org.
I will be embedding this episode of Plugging in The Holes along with a transcript in the form of a post on interglobalmedianetwork.com for your hearing and reading pleasure. Bye for now!