如何使用backgrounimage在div中设置图像?

Question

我有一个div，我必须使用backgroundImage显示照片。我有一个对象，其中一个作为URL路径的图像，我后来从对象返回。我编写了以下代码:

import React from 'react' 
import './user.css';

const User = ({name,img,position,names}) => {
return ( <div className = 'card'>
<div id='image' style={{ 
backgroundImage: `url({${img}})` 
}}></div>
<p className = 'card_name' id = 'based'>{name}</p>
<p className = 'card_position'>{position}</p>
<p>{names + ' '}</p>
</div>
);
}
export default User;

当我尝试运行页面时，我没有任何错误，但我的图像没有出现在页面上。有什么问题吗?

Answer 1

你在传递给URL的值上有额外的括号，试试这个:您还需要为div

添加高度和宽度

style={{
height: "200px", 
width: "100%",
backgroundImage: `url(${img})`,
}}