Quirky rendering problem in AngularJS

My issue involves creating blocks using data from a JSON file, which includes a background-image path for a div.

Here is an example snippet:

[
  ..
  {
    ..
    ..
    "smallimg": "../assets/images/dummy/dummy-intro-1.jpg",
    ..

]

On my page, I have something like:

<div class="fact-img" style="{{facts.smallimg}}" ...

I initially tried including the background-image in the JSON string, but that didn't work. Even placing the background-image declaration just before it did not solve the problem.

Strangely, anything I place inside the style tag is not being recognized by IE (I'm using IE10 / IE9).

If I use {{facts.smallimg}} anywhere else except inside the style tag, it displays correctly. The issue only arises when it's placed within the style tag.

It's worth noting that this works perfectly fine on other browsers.

Any thoughts on why this may be happening?

Plunker code: http://plnkr.co/edit/vXIiTc1P7QUougHJl2Cq

Please pay attention to this part in each fact:

<div class="fact-img" style="background-image:url('../assets/images/dummy/dummy-intro-1.jpg')" data-test="background-image:url('../assets/images/dummy/dummy-intro-1.jpg')">

The content within the style="" attribute is not rendering at all on any version of IE.

javascriptcssangularjs

Answer №1

Due to the fact that `{{facts.smallimg}}` is considered invalid in CSS, Internet Explorer truncates it, resulting in an empty style attribute when scanned by the Angular compiler.

An alternative solution is to utilize ng-style, which requires object notation and does not accept a string containing CSS rules.

<div class="fact-img" ng-style="{backgroundImage: 'url(\'' +  fact.largeimg + '\')'}"> ...

While the ng-style method is effective, you may find it preferable to create a custom directive like my-background-image or utilize an <img /> tag with ng-src, resulting in a cleaner template design.

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

Display only the last two records using AngularJS limitTo

Is there a way to use AngularJS filters and directives like filter, order, or limitTo with ng-repeat to achieve similar functionality as the _.last method in UnderscoreJS? ...

underscore.jsangularjs

React's memo and/or useCallback functions are not functioning as anticipated

Within my Home Component, there is a state called records, which I utilize to execute a records.map() and display individual RecordItem components within a table. function Home() { const [records, setRecords] = useState<Array<RecordType>>(l ...

javascriptreactjstypescriptreact-hooks

Unable to access the output of a Python file with AngularJS

I am brand new to using angularjs and currently tackling a project that requires my angularjs file to react differently based on the output of a python file. However, I keep encountering this specific error: angular.js:10765 GET http://harsha.seq-technolo ...

pythonangularjs

Which JavaScript objects contain the addEventListener method within their prototype?

I am aware of the following: Element.prototype.addEventListener Window.prototype.addEventListener Document.prototype.addEventListener Are there any more? ...

javascripteventsprototypeaddeventlistener

Steps for positioning a div with list items to match the height of its parent container

I've been grappling with this problem for a long time now. Within the parent div "wrapper," there is a child div called "sidebar-wrapper" that contains an ul with li elements. I'm trying to make the height of "sidebar-wrapper" adjust to match t ...

htmlcsstwitter-bootstrap

The website doesn't give my codes enough time to execute fully

I have a series of commands that I need to execute: Retrieve cookie from the browser using the JS Cookie plugin in mypage.php Validate its value with Ajax and my PHP scripts in myapi.php Set certain SESSION variables in myapi.php Utilize the values store ...

javascriptphpajaxcookies

Adding a CSS shadow to an element positioned beneath another

I'm attempting to recreate a shadow effect in HTML similar to one I created in Photoshop: https://i.sstatic.net/fBcBl.png I believe a basic HTML structure like the one below should suffice, but I'm unsure: <div id="anotherMask"> <di ...

htmlcssshadowbox-shadow

Display a button within a table depending on the content of adjacent cells

Below is the code snippet I'm currently working with: <tbody *ngIf="packages"> <tr *ngFor="let package of packages"> <td class='checkbox'> <label class="css-control css-co ...

javascripthtmlangular

Adding information into multiple tables from a single table

I am looking to streamline the process of displaying tables with identical entries on multiple HTML pages. Is there a way to create the table in one place and then call it into other pages? Could it be done like this: <table id="table1"> <th ...

javascriptphphtmlhtml-table

Learn the position of a div element that appears following the lazy loading of images

I am struggling to make a div sticky below a set of lazy load images. The issue lies in the fact that the offset of the div keeps changing due to the lazy loading images pushing it down. There are 4 images with unknown heights, making it difficult to acc ...

javascriptjqueryhtmlcss

Enhancing User Experience: Creating a Vue Button Component for Adding Items to Cart with the Power of Axios and Laravel Backend Integration

I have recently developed a Vue3 shopping cart with an "Add One" button feature. When the user clicks this button, it updates an input field of type "number" and sends a request to update the database using Axios along with Laravel's createOrUpdate me ...

javascriptlaravelvue.jsaxiosvuejs3

Error: Uncaught ReferenceError: d3 is undefined. The script is not properly referenced

Entering the world of web development, I usually find solutions on Stack Overflow. However, this time I'm facing a challenge. I am using Firefox 32 with Firebug as my debugger. The webpage I have locally runs with the following HTML Code <!DOCTYP ...

javascriptjquerytwitter-bootstrapd3.js

React Native issue: why are my variables resetting mysteriously?

Hey there, I'm currently encountering a peculiar situation involving the usage of var and React.useState() variables. I am utilizing the library https://github.com/tongyy/react-native-draggable#readme to define 2 variables - var color1 = ''; ...

javascriptreactjsreact-nativenpmexpo

Struggling with date validation as a new MomentJS user

Looking to validate a date in string format using moment JS, I am encountering an issue. Using the dd/mm/yy format in pCalendar in ngPrime, I store the date value in stDate. Here is the code I have written: var stDate = '02/02/2021'; var stDate ...

javascriptmomentjs

Node.js data transmission: Sending information from server to client

In my node project, PUG/Jade files are used to render webpages. Every minute, a JS file updates a redis database and I want the GUI to reflect these changes without requiring a page refresh. Here is an overview of how the data is currently passed: User ...

javascriptnode.jsexpresspug

Guide on applying CSS to option tag within a select element in VUE.js

I am attempting to design a dropdown menu that resembles the one shown in the image. However, I'm currently unable to include any CSS styling. Can anyone provide guidance on how to create a customizable select dropdown in Vue? https://i.stack.imgur.c ...

javascriptcssvue.js

Removing HTML DOM elements from a string using JavaScript: A step-by-step guide

Hey there, I'm currently working on my angular application. When it comes to inserting the first 100 characters of content into the "description" meta tag for Facebook sharing, I've run into an issue. The description ends up including the HTML el ...

javascripthtmlangularjsdommeta-tags

Is it necessary to insert a thread sleep in HtmlUnit before clicking a button?

I have been experimenting with HtmlUnit to extract scores from the BBC Sports website Upon loading the page, it initially displays Premier League scores. To view scores for other leagues, one must use a dropdown menu and click the 'Update' butto ...

javajavascriptajaxhtmlunit

Creating an alert message in React to notify users of incorrect data being uploaded to an array

Just getting started with React and looking to ensure that the csv data uploaded by users follows the specified standard of “currency, amount, price, timestamp”. If the user uploads data that doesn't meet this standard, an error alert is triggered ...

javascriptreactjstry-catch

Upon initiating a refresh, the current user object from firebase Auth is found to be

Below is the code snippet from my profile page that works perfectly fine when I redirect from the login method of AuthService: const user = firebase.auth().currentUser; if (user != null) { this.name = user.displayName; this.uid = user.uid; } e ...

javascriptangularfirebasefirebase-authentication