使用React内联样式设置背景图片

20 浏览
0 Comments

使用React内联样式设置背景图片

我正在尝试访问一个静态图片，以便在React内部使用内联backgroundImage属性。不幸的是，我不知道该怎么做。

通常情况下，我认为你只需要这样做：

import Background from '../images/background_image.png';
var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};
class Section extends Component {
  render() {
    return (

); } }

这适用于标签。有人能解释一下两者之间的区别吗？

示例：

很好用。

谢谢！

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

使用内联样式将任何图像设置为全屏：

style={{  
  backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat'
}}

0
0 Comments

backgroundImage属性内的花括号是错误的。

可能您正在使用webpack以及图像文件加载器，因此背景应该已经是一个字符串：

backgroundImage: "url(" + Background + ")"

您还可以使用ES6字符串模板来实现相同的效果：

backgroundImage: `url(${Background})`

0