Purifying potentially harmful style value for background-image when using ngStyle with a conditional statement

I'm attempting to dynamically display a background image of a div using ngStyle. I have also set a fallback image in case the default value is null.

<div class="card-img-top" 
[ngStyle]="{'background-image': process.thumbnail != null ? 'url(data:image/png;base64,' + 
process.thumbnail +')' : 'url(./assets/default-thumbnail.png)' | safeHtml}"
>

Although it functions correctly, I am receiving console warnings for all the thumbnails, such as the following:

core.js:6462 WARNING: sanitizing unsafe URL value data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAAQIAAABxCAYAAAA+..

Even after sanitizing the URL with safePipe, the warning persists. I'm uncertain if I have implemented it correctly

import { Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeHtml'})
export class SafeHtml {
  constructor(private sanitizer:DomSanitizer){}

  transform(value) {
    return this.sanitizer.bypassSecurityTrustStyle(value);
  }}

Answer №1

After trying different approaches, I found success by substituting [ngStyle] with [style.background-image]. It turns out that there was no need to sanitize the style.

<div class="card-img-top" 
[style.background-image]="process.thumbnail != null ? 'url(data:image/png;base64,' + 
process.thumbnail +')' : 'url(./assets/default-thumbnail.png)'" >

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

Angular 6's subscribe method is causing the UI to not update

I'm currently facing an issue where my component does not refresh the UI after I input data. I always have to manually refresh the page to see the changes. I suspect there might be a problem with the .subscribe method in Angular 6. Previously, when I ...

CSS Styled Product Index

Currently, I am working on creating a product catalog using React and CSS. Everything is going smoothly except for the last row of products. The issue with the last row is that it only contains 1 element, and due to the flex-grow: 1 setting, it ends up ta ...

I'm curious about the correct method for updating a parent component using a shared service within the ngOnInit function in Angular version 13

There have been instances where I encountered a scenario multiple times, where I utilize a shared service within the ngOnInit of a component to update a value in another component, specifically its parent. This often leads to the well-known Error: NG0100: ...

What is the best way to create a triangle shape that is responsive to elements?

I'm trying to make a background shape with a triangle inclusion using CSS. I want it to be responsive to all screen sizes, but I'm having some trouble. Any tips on how to achieve this? header { width: 100%; height:150px; background: #eee; } m ...

Is using $timeout still considered the most efficient method for waiting on an Angular directive template to load?

When it comes to waiting for a directive's template to render, our team has been following the approach of enclosing our DOM manipulation code in a $timeout within the directive's link function. This method was commonly used in the past, but I&ap ...

Media queries for Tailwind CSS in a Node JS application do not function properly when viewed on a mobile device

I recently developed a Node JS app using EJS templates and Tailwind CSS. Check it out live here: If you're curious, feel free to explore the code on Github. While the media queries function well on desktop devices, they seem to be ineffective on mo ...

Embed full content in iframe using bootstrap 4

Embedding an iframe of an appointment scheduling frontend on my page has been a challenge. While the width is correct, the height of the frame is too small. Despite attempting various CSS modifications, I have not been able to achieve the desired result. I ...

Adding text after a div in React-JS using Bootstrap: A quick guide

Just starting out with website development and I have a question. As I practice making this website, I am struggling to figure out how to add the text "To know more about us click here" below the 'Get started' button. I tried adding a simple < ...

How can I retrieve the height of a hidden image in Internet Explorer?

I am encountering an issue with images that have been set to display:none. I am using javascript (document.getElementById('elem').height) to retrieve the height/width of these images. While this method works in most browsers, IE is reporting th ...

Tips for displaying an asp.net form using javascript functions

I am currently developing a login page in asp.net and have utilized a template from CodePen at http://codepen.io/andytran/pen/PwoQgO It is my understanding that an asp.net page can only have one form tag with runat="server". However, I need to incorporate ...

What is the best way to determine the type of a key within an array of objects

Suppose I have the following code snippet: type PageInfo = { title: string key: string } const PAGES: PageInfo[] = [ { key: 'trip_itinerary', title: "Trip Itinerary", }, { key: 'trip_det ...

Pile of automatically generated elements

Within our application, a dynamic panel has been implemented to load various forms. The panel service is responsible for receiving information about which form to load, and the panel component then handles the creation and loading of the specific form usin ...

What is the best way to utilize typed variables as types with identical names in Typescript?

Utilizing THREE.js with Typescript allows you to use identical names for types and code. For instance: import * as THREE from '/build/three.module.js' // The following line employs THREE.Scene as type and code const scene: THREE.Scene = new THRE ...

Sending real-time data from the tRPC stream API in OpenAI to the React client

I have been exploring ways to integrate the openai-node package into my Next.js application. Due to the lengthy generation times of OpenAI completions, I am interested in utilizing streaming, which is typically not supported within the package (refer to he ...

Angular two - Communication between parent and children components using a shared service

I am currently working on establishing communication between child components, but according to the documentation, I need to utilize services for this purpose. However, I am facing challenges in accessing service information. When I try to assign the retur ...

Add a sublime project with a specific directory path

Currently, I am using Sublime Text 2 for a project that is structured as follows: public vendors a.css b.css myfile.less myfile.css (compiled) I am facing an issue where I need to exclude the css files from the main 'public' folder (specifi ...

Looking for assistance with resizing SVG images

I am facing some challenges with the HTML/CSS code to make all SVG's scale uniformly in terms of height/width. I have set up a simple structure but I'm unsure of what steps to take next. When I view the images in the browser, they are all scaled ...

Is it possible to customize the formatting of the information displayed within a details tag when it is nested under a summary

Is there a way to format the details information so that it aligns underneath the summary tag? Currently, both lines of text are aligned to the left. <details> <summary> Summary 1 </summary> Details 1 </details> ...

Defining a TypeScript interface specifically tailored for an object containing arrow functions

I encountered an issue while trying to define an interface for the structure outlined below: interface JSONRecord { [propName: string]: any; } type ReturnType = (id: string|number, field: string, record: JSONRecord) => string export const formatDicti ...

Deciphering the :host attribute in CSS: A guide

When using Selenium to query the CSS properties of an element, I noticed that even though the actual background color is white, the returned value for background-color is always #000000. This issue arises in an Ionic-built app. Upon inspecting with Chrome ...