Ways to set a default image for an <img> tag

Question

Ways to set a default image for an <img> tag

I am looking to set a default image to the img tag in case the user has not selected a profile picture for their account.

Here is the current output: http://jsfiddle.net/LvsYc/2973/

Check out the default image here:

This is the script being used:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

javascript jquery css html

Answer 1

Answer №1

Check out this fiddle that demonstrates the concepts discussed in the comments:

HTML

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <div class="img">
        <img id="blah" src="#" alt="your image" />
    </div>
</form>

CSS

img {
    width: 120px;
    height: 120px;
}
img[src="#"] {
    display: none;
}
.img {
    background: url('http://i38.photobucket.com/albums/e149/eloginko/profile_male_large_zpseedb2954.jpg');
    background-position: -20px -10px;
    width: 120px;
    height: 120px;
    display: inline-block;
}

The javascript code remains unchanged.

Answer 2

Check out this fiddle that demonstrates the concepts discussed in the comments:

HTML

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <div class="img">
        <img id="blah" src="#" alt="your image" />
    </div>
</form>

CSS

img {
    width: 120px;
    height: 120px;
}
img[src="#"] {
    display: none;
}
.img {
    background: url('http://i38.photobucket.com/albums/e149/eloginko/profile_male_large_zpseedb2954.jpg');
    background-position: -20px -10px;
    width: 120px;
    height: 120px;
    display: inline-block;
}

The javascript code remains unchanged.

Answer 3

Answer №2

I came up with a simple script to address this issue:

Check out the JSFiddle link for more details: http://jsfiddle.net/LvsYc/3102/

$(function () {
    var loader = 'http://i38.photobucket.com/albums/e149/eloginko/profile_male_large_zpseedb2954.jpg';
    $('img[data-src]:not([src])').each(function () {
        var $img = $(this).attr('src', loader),
            src  = $img.data('src'),
            $clone = $img.clone().attr('src', src);
        $clone.on('load', function () {
            $img.attr('src', src);
        });
    });
});

Here's how it works:

When the page loads, it checks all image tags with a data-src attribute but no src set.
A clone of the image tag is created with the src set to the value of data-src.
Once the cloned image has finished loading, the original image tag's src is updated to match the data-src.

There are many approaches to solving this problem, and while this may not be the most efficient method, it should get the job done.

Answer 4

I came up with a simple script to address this issue:

Check out the JSFiddle link for more details: http://jsfiddle.net/LvsYc/3102/

$(function () {
    var loader = 'http://i38.photobucket.com/albums/e149/eloginko/profile_male_large_zpseedb2954.jpg';
    $('img[data-src]:not([src])').each(function () {
        var $img = $(this).attr('src', loader),
            src  = $img.data('src'),
            $clone = $img.clone().attr('src', src);
        $clone.on('load', function () {
            $img.attr('src', src);
        });
    });
});

Here's how it works:

When the page loads, it checks all image tags with a data-src attribute but no src set.
A clone of the image tag is created with the src set to the value of data-src.
Once the cloned image has finished loading, the original image tag's src is updated to match the data-src.

There are many approaches to solving this problem, and while this may not be the most efficient method, it should get the job done.

Answer 5

Answer №3

To handle the onError event for an image and reassign its source using Javascript, you can use the following methods:

function handleImageError(img) {
    img.onerror = "";
    img.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="handleImageError(this);"/>

Alternatively, you can achieve the same result without a JavaScript function like this:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

Answer 6

To handle the onError event for an image and reassign its source using Javascript, you can use the following methods:

function handleImageError(img) {
    img.onerror = "";
    img.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="handleImageError(this);"/>

Alternatively, you can achieve the same result without a JavaScript function like this:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

Ways to set a default image for an <img> tag

Answer №1

Answer №2

Answer №3

Similar questions

Customizing div elements in various RMarkdown documents with a CSS file

What is the best way to simultaneously create a customer and add a card with Stripe?

Fixing the Timeout Error in Node.js & Mongoose: A Step-by-Step Guide

Is there a way for me to figure out if a Primefaces RadioCheckbox has been selected?

Trouble with displaying autocomplete options for ajax requests

Display the modal in Angular 8 only after receiving the response from submitting the form

Could someone please clarify a specific aspect of how floats work?

Troubleshooting: npx create-react-app displaying errors during installation

JavaScript's data.map function cannot be found

Triggering a jQuery event upon clicking a link

I am struggling to display an array of objects retrieved from the server in the UI using AngularJS

Customizing the CSS shadow for a specific ionic select text color, while ensuring that other ion select instances remain unaffected

Determination of Vertical Position in a Displayed Table

Is Ajax still a popular choice for developing web applications?

Enhance and streamline custom module code within a Node.js Express application

Setting up route handlers in Node.js on a pre-initialized HTTP server

Whenever I repeatedly click the button, the array will store a new value. My goal is for it to collect and store all values obtained from the function

How to assign a click event to dynamically generated HTML elements using jQuery

Vue.js encounters a null value for "$slots.default()[0].el" when dynamically passing a slot using v-for

What is the best way to automatically show scrollbars when a page loads using JavaScript?