Temporarily assign a placeholder image for any broken image

Is there a way to display a default image instead of a broken image without changing the URL?

I have created a template editor where users can input dynamic URLs for images. Initially, the image appears broken, but when the user sends it, the correct image is retrieved and displayed.

When the image source is changed to a dynamic URL, a broken image is shown. I want to keep the source intact but display a good background image instead of the default broken image.

For example:

<img src="dynamic.src"></img>

If I write JavaScript to change the source on error to a static image, it would overwrite the link provided by the user as "dynamic.src" in this case.

Any suggestions would be greatly appreciated.

javascriptjqueryhtmlcssimage

Answer №1

Majority of web browsers automatically make images that do not exist transparent. This allows for the addition of a background-image to the image element. In cases where the image does exist, it will cover the background image, however, if the image is nonexistent, the transparency feature will enable the display of the background-image.

View Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript code to prevent user from entering phone number

I operate a booking platform similar to AirBnB where users communicate with each other through messages on the site. My goal is to prevent users from sharing telephone numbers and email addresses within these messages. Currently, I am implementing a meth ...

javascriptphp

Navigating through IE z-index complications to position a modal *above* a YUI Panel

Within my web application, I have implemented an informational pop-up modal using a <div> element with the CSS attribute "display" set to "none". To display this modal when needed, a JavaScript code snippet is used to toggle the display attribute. W ...

javascripthtmlcssinternet-exploreryui

Tips for sorting through an array containing various types of data

I'm dealing with an array structured like this: const AllFiles = [ {name: "ExistingFile1", mimetype: "image/jpg", size: "500"}, [ File, // This is the New File itself (see File API) {name: "NewFi ...

javascriptarraysobjectecmascript-6

Are the buttons appearing within a pop-up display?

I am having an issue with my Javascript popup buttons. Whenever the popup appears, the buttons that come after the one clicked appear on top of the popup container, and the previous buttons appear behind it. How can I ensure that the popup container displa ...

javascripthtmlcssbuttonpopup

What is the best way to scale down my entire webpage to 65%?

Everything looks great on my 1920x1080 monitor, but when I switch to a 1024x768 monitor, the content on my webpage becomes too large. I've been manually resizing with CTRL+Scroll to reduce it to 65%, which works fine. Is there a code solution using CS ...

javascripthtmlcssjoomla

Issue encountered when populating the list of orders along with an array of merchandise items

I am currently in the process of developing an e-commerce website using React, Node, and MongoDB. The order schema I created includes the cmdRef (string), the client ID, and an array of products (with product IDs and quantities) as shown in the code below: ...

javascriptnode.jsreactjsmongodbmongoose

Using JQuery to target and select all the lists except for the final one in a group of multiple lists

Seeking advice on the most elegant and efficient approach for my task. I am working with multiple 'tag' lists and aiming to make them display inline and comma-separated through CSS. The main challenge I face is adding commas to all list items ex ...

jqueryxhtmljquery-selectors

Hiding Individual Borders Using HTML

Is there a way to create a gap in the last row by removing the borders? Any ideas on how I can achieve this? Thank you! ...

htmlcss

Applying CSS to both pop-up and desktop interfaces can be achieved through the use of media queries or alternative solutions

I am facing a dilemma where I need to display the same content on both a pop-up and desktop view. While I have already implemented media queries to adjust the content for desktop and mobile views, I am struggling with displaying the same content on a pop ...

csssasspopupmedia-queries

What is the best way to ensure that messages stay saved in my app for an extended

I am looking for a way to store messages sent through my small messaging app in a persistent manner. Currently, the messages are transferred from the front-end to a Node, Socket.io, and Express back-end. A friend recommended using Enmaps (), but unfortuna ...

javascriptnode.jsexpresssocket.iolocal-storage

Sort and incorporate elements by multiple strings present in an array

Looking to filter and include strings in an array by matching them with items in another array? Here is a sample code snippet that filters based on a single string: const filteredString = `${this.filter}`.toLowerCase(); this.filteredCampaigns = this. ...

javascripttypescript

Creating a tree structure using an array of objects

I am working with an array containing the following data: const data = [ { id: 1, type: 'type 1' }, { id: 2, type: 'type 2', subtype: 'subtype 2' }, { id: 3, type: 'type 2', subtype: 'subtype 3' }, ...

javascriptarraystreelodashreduce

Decipher the JSON data for a Facebook cover photo

I am utilizing the Facebook Graph API to retrieve the user's cover picture. By accessing the link provided at , a JSON object containing the picture link is returned. How can I fetch this link using JQuery or JavaScript? Here is my attempt: HTML: & ...

javascriptphpjqueryjsonfacebook-graph-api

Creating a JSoup document with embedded JavaScript: A step-by-step guide

After generating a JSoup Document with two <script type="application/javascript">/* .. */</script> elements, I encountered an issue. The Problem: Whenever I use .html() or .toString() in JSoup, my JavaScript code gets escaped. if (foo &&a ...

javascriptjavajsoup

Filter an array of objects in Javascript based on a key present in another array of objects

Having two arrays, one with all products and one with products a user can access, both sharing a common ID. The goal is to filter the products array to only include those accessible to the user. All available products (products) [{ "productName": "My P ...

javascriptarraysnode.js

What is the method to adjust the image width in jCarousel?

I've been using the jCarousel carousel application from Sorgalla's projects. However, I'm having trouble changing the default image width setting. Currently, the images are set at around 80px width, but I need them to be 170px as my pictures ...

cssimagewidthjcarousel

Ways to avoid the default values from being applied

I have included a demo below for your reference There are two default options values: usa and asia. Initially, I had to add a placeholder to both columns by default. Furthermore, I needed the placeholder to be unique for each tag. How can I accomplish t ...

htmlformscss

What sets apart the usage of `import Anything from #anywhere` from not importing anything at all?

When utilizing the autoimport feature of Nuxt 3: Are there any implications (such as types, performance, bundle size, tree shaking, etc.) when using the # alias to import something as opposed to not importing at all? Or is its sole purpose to provide expl ...

javascriptvue.jsnuxt.jsvuejs3nuxt3.js

Eliminating pins from Biostall Google Maps plugin in CodeIgniter

After successfully setting up the Biostall Google Maps for Codeigniter, I am now looking to remove specific markers using ajax. The JavaScript code being executed is as follows: var myLatlng = new google.maps.LatLng(53.236114, 6.496444); var markerOption ...

javascriptjqueryapigoogle-maps

JavaScript: Replace image title on mouse over

I am having trouble adding '_hover.jpg' to my images on mouse over. Can anyone provide assistance with this issue? Thank you in advance. <script type="text/javascript> $(document).ready(function () { $(".img").mouseover(function (e) { ...

javascriptjquerycss