无法在IonCard Ionic4- React中设置背景图片

问题描述

我无法在ioncard组件中设置背景图像。这是我的代码

                 <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：“黄色”

似乎可以正常工作，因为这仅用于检查，但我在任何地方都看不到背景图像。 “ IonImage”标签也可以正常工作，但我希望图像在背景中...

解决方法

考虑当图像用作来源时该图像有效，我认为item.image是url。

您可以将该值包装在url()

中吗

像这样：

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