Using a dynamic image source in an Ionic 3 background

I am using ngFor to display a list of posts, each of which should have a unique background image. The getBackgroundStyle function is responsible for extracting the URL of the image from the post array.

    <div class="singlePost" *ngFor="let post of data" (click)="itemTapped($event, post)">
        <div style="background-image: url('{{getBackgroundStyle(post)}}')">
            <img src="{{getBackgroundStyle(post)}}">

Strangely, after building the code, the img tag displays correctly, but the div element loses its style attribute entirely.

Displayed output in lab/browser:

<div class="singlePost">
    <div>
        <img src="http://theurl.com">

Answer №1

Instead of this approach, consider using attribute binding:

<div [ngStyle]="{ background-image: 'url(' + getBackgroundStyle(post) + ')' }"></div>

Alternatively, you can also use:

<div [style.background-image]="'url(' + getBackgroundStyle(post) + ')'"></div>

Similarly, apply the same concept to the image element as well:

<img [src]="getBackgroundStyle(post)">

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

Choosing the specific columns to be shown in the Kendo Angular grid

Will there be an interface available in the grid for users to select which columns are displayed, or is this a feature that will be introduced in the upcoming September release? ...

The error stating that document.getElementById(...) is null has occurred within RSForms due to a TypeError

Issue: When clicking on the form to continue, a TypeError: document.getElementById(...) is null error occurs. Can anyone help me fix this problem? When I click on the continue button, it calls the function submitForm. <script type="text/javascript"> ...

Is there a way to implement full-page scrolling in Vue?

Looking for a Vue equivalent of the fullpage.js library. Need a component that allows scrolling through elements similar to fullpage.js. ...

Converting an array of object values to an Interface type in Typescript

In my JSON document, I have an array named dealers that consists of various dealer objects like the examples below: "dealers" : [ { "name" : "BMW Dealer", "country" : "Belgium", "code" : "123" }, { "name" : ...

Display the content of an md-dialog with a scroll bar

I am experiencing a problem with printing a long report created using md-list displayed in a md-dialog. When I attempt to print it, only the section that is currently visible on the screen gets printed instead of the entire length of the md-list. I have at ...

How can I locate the ID of the HTML input element with jQuery?

I am trying to create a page with a button that looks like this: <input type="button" id="btnAddBusinessUnit" value="Add Business Unit" class="clsAddBusinessUnit" alt="testBtn" /> When the button is clicked, I want to display the id 'btnAddBus ...

Can CSS be used to create drop down menus?

Is it possible to create a dropdown menu using only CSS, similar to what you would find in most applications? I have a simple menu bar at the top of my screen and I want to be able to hover over an item like "Item1" and see sub-items appear below it. I en ...

Guide on converting a complex nested json into the jquery autocomplete format

How can I properly format a complex nested JSON for use with jQuery autocomplete? I have been attempting to map my custom JSON data to fit the required jQuery autocomplete format of label and value, but unfortunately, my list is returning as 'undefine ...

Encountering difficulty in retrieving the outcome of the initial HTTP request while utilizing the switchMap function in RxJS

My goal is to make 2 HTTP requests where the first call creates a record and then based on its result, I want to decide whether or not to execute the second call that updates another data. However, despite being able to handle errors in the catchError bl ...

Eliminate operation in React with the help of Axios

Within my React application, I have implemented a callback method for deleting data from an API using the axios library: deleteBook(selectedBook) { this.setState({selectedBook:selectedBook}) axios.delete(this.apiBooks + '/' + this.select ...

Passing no data in Angular.js ui-router.Angular.js ui-router

Within my Ionic application, there is a need to pass parameter(s) from one sub-view to another. Initially, the parameters are successfully passed as expected. However, upon returning to the first sub-view and then navigating to another sub-view, the parame ...

Trigger the animation of a Div element when the cursor hovers over a different Div

I am interested in creating an animation where one div moves when the mouse hovers over another div elsewhere on the page. Here is an example... CSS #blue-box { position:absolute; margin-left:50px; margin-top:50px; height:100px; width:100px; background-c ...

The input and label are not experiencing any overflow

I've been following a tutorial to create an animation on an input and label. I successfully did it once today in school, but for some reason, it's not working now. My objective is to have the label inside the "input" field, with the input taking ...

Tips for expanding a flex-grow element to fill the area of a concealed flex item

I am looking to create a window that can be divided into two or three areas based on the state of a checkbox. When the box is checked, I want the second area to be hidden and the first area to expand to fill the additional space. My layout works perfectly ...

Creating a backup link for a video player component in NextJs

My aim is to make sure that two video player components in a NextJS application can still access and play videos even when the application is running locally using npm run dev without an internet connection. Currently, these two components.. <HoverVi ...

In React, I am currently working on implementing a feature that will allow the scene camera to move as the user scrolls

I'm currently working on incorporating a feature to enable movement of the scene camera when scrolling in React. However, as I am relatively new to using this library, I am unsure which implementation approach would be most suitable for achieving this ...

Force restart broken socket within Node.js program using Socket.IO programmatically

I have a simple one-to-one client and server Node.js based application. The Node.js is running on Linux (Intel Edison). I am attempting to automatically reboot the Linux server whenever the socket connection is broken. Is this achievable? Below is my unco ...

The color of the ellipsis value does not match properly

In my table, I have lines that end with 3 dots '...' when the text overflows. To achieve this, I used the ellipsis value of the text-overflow property. While this works well and the '...' are displayed when resizing the window, I encoun ...

Determine the starting position of a div's CSS bottom using jQuery before the hover animation begins

Currently, I am in search of the CSS value 'bottom' for each div that belongs to the 'shelf-info-text' class. These particular divs can be found inside a parent div called 'shelf-item'. The bottom value is determined automati ...

Is there a way for me to dynamically decide whether to use the append or prepend function?

Utilizing jQuery to retrieve data from the controller and populate a calendar represented by a table with days in columns. Implementing functionality for navigating between previous week / next week, as well as previous day / next day. The four scenarios s ...