CODEWITHSUNDEEP
javascripthtmlimagegoogle-chrome
adam.bielasty
adam.bielasty

Reputation: 701

An issue with src(unknown) - broken image in Chrome

I am having a really strange behavior in Chrome when I try to display images.

I see some little badges with breaking images like that: enter image description here This is just broken image picture.

It didn't work like that in chrome before.

I use some javascript code to handle not found images:

//This script will be loaded in head section of the page
function fixBrokenImage(element) {
    element.onerror = '';
    element.src = '';
}

And in HTML:

<img src="~/Image?getById=@Model" onerror="fixBrokenImage(this)"/>

However, it only works in Chrome for the first time when I do Clear Cache and Hard Refresh and does not work in subsequent normal refreshes

It is ashamed to say but it works in IE and Edge which feels a little bit funny.

Do you know maybe how can I fix it in Chrome. I am using version: Version 63.0.3239.108 (Official Build) (64-bit)

Thanks for any suggestions

Upvotes: 2

Views: 8135

Answers (3)

mod7ex
mod7ex

Reputation: 948

if you are using php then esc_url($url) will solve it, esc_url function solves the problem or just use URL.createObjectURL(url) simply in Js

Upvotes: 0

adam.bielasty
adam.bielasty

Reputation: 701

I managed to make it working by adding empty attribute to the html element:

<img src="~/Image?getById=@Model" onerror="fixBrokenImage(this)" alt=""/>

Thanks @Teemu for your suggestions which eventually made that code work on Chrome

Upvotes: 0

Alex Raţiu
Alex Raţiu

Reputation: 127

You can use this javascript code like this, you forgot to put alt attribute:

function fixBrokenImage(element) {
    element.onerror = '';
    element.src = '';
    element.alt = 'image not found'
}

Upvotes: 1

Related Questions