How can one determine if a background image has successfully loaded in an Angular application?

In my Angular 7 application, I am displaying a background image in a div. However, there are instances when the link to the image is broken.

The way I bind the image in my HTML is as follows:

<div [ngStyle]="{'background-image': 'url(' + row?.coverUrl + ')', 'background-size': 'cover', 'background-position' : 'center'}" class="img-area cursor-pointer" (click)="navigateToCompany(row)" *ngIf="row.coverUrl !== ''">
</div>

The issue arises when the row?.coverUrl turns out to be a broken link. Is there a way to detect this so that I can assign a default image instead?

angulartypescript

Answer №1

If you encounter image loading issues, here are a couple of solutions:

  1. One workaround is to use an invisible img tag (suggested by user549302) and update the coverUrl in your row using the error handler, subsequently updating the background image of your DIV.
  2. Another option is to pass multiple URLs in the background-image property, with the fallback image as the second URL. This allows the fallback image to load if the first one fails. It's important to note that this method works best for non-transparent images. You can find a sample code demonstrating this technique here.

Answer №2

While there may not be a professional solution available, I still wanted to showcase some different approaches that you can try if you're interested.

<div [ngStyle]="backgroundObj" class="img-area cursor-pointer"></div>
<img hidden [src]="brokenImageUrl" (error)="doSomethingOnError($event)" />



  brokenImageUrl = null // or try -> 'https://placebeard.it/640x360'; 
  brokeImage =
    'https://serpstat.com/img/blog/how-to-detect-broken-images-on-the-website/16451874451570033394image1-min.png';
  image = 'https://placebeard.it/640x360';
  backgroundObj = {
    width: '500px',
    height: '500px',
    'background-image': 'url(' + this.image + ')',
    'background-repeat': 'no-repeat',
  };
  

  doSomethingOnError(event: any) {
    if (event) {
      this.backgroundObj = {
        width: '500px',
        height: '500px',
        'background-image': 'url(' + this.brokeImage + ')',
        'background-repeat': 'no-repeat',
      };
    }
  }

Check out the demo on stackblitz

Answer №3

Here is a potential solution to address the issue at hand

<div [ngStyle]="{'background-image': 'url(' + row.coverUrl? row.coverUrl : 
  deafultUrl + ')', 'background-size': 'cover', 'background-position' : 
  'center'}" class="img-area cursor-pointer" 
  (click)="navigateToCOmpany(row)" *ngIf="row.coverUrl !== ''">
</div>

Answer №4

To enhance user experience, I implemented a spinner for image loading. Utilizing an Image element to load the image, I then converted it into a data URL upon successful loading, which was then passed to the <img> tag. This approach allowed me to accurately track the image loading progress and status.

It is important to exercise caution when replacing images with the same URL to avoid potential confusion or errors.

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

How can I update the component UI after using route.navigate in Angular 2?

I am attempting to update my user interface based on a list retrieved from a service. Here is the code snippet: HTML portion: <li *ngFor="let test of testsList" class="list-inline-item"> <div class="row m-row--no-padding align-items-cente ...

angularangular-ui-routerangular2-routing

Is there a way to prevent the Drop event in Angular2?

In my Angular2 application, I have created a directive for an input field. To prevent paste or Ctrl+V within the host element of this directive, I used the following code which is functioning flawlessly: @HostListener('paste', ['$event&apos ...

angulartypescript

Utilizing ngFor to iterate over items within an Observable array serving as unique identifiers

Just starting out with Angular and I'm really impressed with its power so far. I'm using the angularfire2 library to fetch two separate lists from firebase (*.ts): this.list1= this.db.list("list1").valueChanges(); this.list2= this.db.list("list2 ...

angulartypescriptangularfireangularfire2angularfire5

Error! Unexpected closure occurred while creating an Angular CLI project with npm

After cloning an Angular (4+) CLI project onto a new machine and running npm install, I encountered an error that reads as follows. This project works perfectly fine on other computers: npm ERR! premature close npm ERR! A complete log of this run can be ...

angularnpmangular-cli

How can I make TypeScript properly export function names for closure-compiler?

Here is the TypeScript code I am working with: namespace CompanyName.HtmlTools.Cookie { export function eraseCookie(name:string, path:string) { createCookie(name, "", path, -1); } export function readCookie(name:string) { ...

javascripttypescriptminifygoogle-closure-compiler

Does the message "The reference 'gridOptions' denotes a private component member in Angular" signify that I may not be adhering to recommended coding standards?

Utilizing ag-grid as a framework for grid development is my current approach. I have gone through a straightforward tutorial and here is the code I have so far: typography.component.html https://i.stack.imgur.com/XKjfY.png typography.component.ts i ...

htmlnode.jsangulartypescriptag-grid

Disabling a specific tab in an array of tabs using Angular and Typescript

Displayed below are 5 tabs that can be clicked by the user. My goal is to disable tabs 2 and 3, meaning that the tab names will still be visible but users will not be able to click on them. I attempted to set the tabs to active: false in the TypeScript fi ...

javascriptangulartypescriptangular-template

How can I import multiple variables in TypeScript?

I have a React application built with TypeScript, and my project directory is structured as follows: App.tsx /pages Page1.tsx The contents of Page1.tsx are shown below: Page1.tsx class PageParams { constructor() { } } class Page1 { co ...

reactjstypescript

Tips for continuously running a loop function until retrieving a value from an API within a cypress project

Need help looping a function to retrieve the value from an API in my Cypress project. The goal is to call the API multiple times until we receive the desired value. let otpValue = ''; const loopFunc = () => { cy.request({ method: &ap ...

javascripttypescriptecmascript-6cypress

Utilize TypeScript to match patterns against either a string or Blob (type union = string | Blob)

I have created a union type called DataType, type TextData = string type BinaryData = Blob type DataType = TextData | BinaryData Now, I want to implement it in a function function processData(data: DataType): void { if (data instanceof TextData) ...

typescripttypes

Using Cypress fixtures with TypeScript

After transitioning from using Cypress with Javascript specs to Typescript, I encountered a challenge in working with Fixtures. In Javascript, the approach below worked; however, I faced difficulties when switching to Typescript. Fixture JSON file: I sto ...

javascriptjquerytypescripttestingcypress

Retrieve every hour between two specific timestamps

I am attempting to retrieve all dates between two timestamps that fall on a specific day of the week. I have a start date represented by 'start1' and an end date represented by 'end1'. Additionally, I have a list of days with correspon ...

javascriptangulardatemomentjsangular-moment

Utilize a function to wrap the setup and teardown code in Jest

I am attempting to streamline some common setup and teardown code within a function as shown below: export function testWithModalLifecycle() { beforeEach(() => { const modalRootDom = document.createElement('div') modalRootDom.id = M ...

typescriptjestjs

Is the validator in my Angular reactive form malfunctioning?

I have been working on a service where I'm trying to validate the zip code field, but for some reason, the logic (result ? null : { IsInvalid: true }) is not executing. It makes me wonder if there's an issue with the reactive form or if I am usin ...

angularvalidationasynchronousangular-reactive-forms

After transitioning to TypeScript, the CRA app is encountering issues loading CSS files compiled by SASS

My React application was originally created using create-react-app and I had been successfully loading scss files with the node-sass package. However, after deciding to switch to TypeScript following the steps outlined in , my css files are no longer being ...

cssreactjstypescriptsass

Implementing a props interface for conditions in styled components within a React application using Typescript

This specific component is created using React along with the "styled components" library to manage user input. In the case of invalid user input, the corresponding styles should be displayed as shown below (class invalid). Although this example functions ...

reactjstypescriptstyled-components

What is the best way to update this payload object?

Currently, I'm developing a route and aiming to establish a generic normalizer that can be utilized before storing user data in the database. This is the function for normalization: import { INormalizer, IPayloadIndexer } from "../../interfaces/ ...

javascriptnode.jstypescriptexpresstypes

Is it possible to define a shared function for enums in TypeScript?

I have created an enumeration called VideoCategoryEnum: enum VideoCategoryEnum { knowledge = 0, condition = 1, interview = 2, speech = 3, entertainment = 4, news = 5, advertisement = 6, others = 7, } I am looking to implement a shared met ...

javascripttypescript

Learn How to Implement Styling in Material UI using Styled Components

Utilizing styled-components with MaterialUI integration. Encountering the following error in LoginTextField component and seeking a resolution. Error Message: [ts] Type '{ width: number; }' is missing the following properties from type &apos ...

reactjstypescriptmaterial-uimaterial-designstyled-components

What are the steps for deploying an Angular 6 application on an Express server?

In my express server.js file, I have the following line of code: app.use(express.static(path.join(__dirname, '/dist/'))); This line is responsible for serving up the Angular app when users navigate to /. However, if the app has additional route ...

angularexpress