如何解决无法在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",}}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。