Cannot set background Image in IonCard Ionic4- React

Question

I am not able to set background image in my ioncard component . Here is my code

                 <IonRow>
                  {allCategories.categories.map((item, index) => {
                    return (
                      <IonCol size="6" size-md="4" size-lg="3" key={index}>
                        <IonCard
                          onClick={() => getProducts(item)}
                          style={{
                            backgroundImage: `${item.image}`,
                            backgroundColor: "yellow",
                          }}
                        >
                          {/* <IonImg src={item.image} className="catImage" /> */}.  //this works fine but i want the image to be in background
                          <IonItem>
                            <IonLabel>{item.title}</IonLabel>
                          </IonItem>
                        </IonCard>
                      </IonCol>
                    );
                  })}
                </IonRow>

backgroundColor:'yellow'

seems to work fine as this was just for checking, but i do not see anywhere the background image. "IonImage" tag also works fine but i want the image to be in background...

Answer 1

considering the image worked when it's used as a source I assume item.image is a url.

Can you wrap that value in url()

like so:

 style={{
  backgroundImage: `url(${item.image})`,
  backgroundColor: "yellow",
 }}