使用React内联样式设置backgroundImage
我正在尝试访问一个静态图像，以便在React中的内联backgroundimage属性中使用。不幸的是，我已经不知道该怎么做了。
一般我以为你刚才是这样做的：
import Background from '../images/background_image.png';
var sectionStyle = {
width: "100%",
height: "400px",
backgroundImage: "url(" + { Background } + ")"
};
class Section extends Component {
render() {
return (
<section style={ sectionStyle }>
</section>
);
}
}
这适用于
示例：
工作正常。
谢谢！
共有2个答案
设置全屏任何图像的内联样式：
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'
}}
backgroundImage属性中的花括号是错误的。
您可能正在使用webpack和图像文件加载器，因此Background应该已经是一个字符串:backgroundimage:“url（”+Background+“）”
您也可以使用ES6字符串模板如下所示来达到同样的效果：
backgroundImage: `url(${Background})`
-
问题内容： 我正在尝试访问静态图像以在React 的内联属性中使用。不幸的是，我已经干了如何做到这一点。 通常，我认为您只是这样做如下： 这适用于标签。有人可以解释两者之间的区别吗？ 例： 效果很好。 谢谢！ 问题答案： backgroundImage属性内的花括号错误。 可能您正在将webpack与图像文件加载器一起使用，因此Background应该已经是一个String了： 您还可以使用以下E
-
问题内容： 我正在尝试使用带有剑道分离器的Reactjs。拆分器的样式属性如下 使用Reactjs，如果我正确理解了所有内容，则可以使用内联样式来实现 但是，我也使用Dustin Getz jsxutil尝试将内容拆分成更多部分并具有独立的html片段。到目前为止，我有以下html片段（splitter.html） 和splitter.js组件，该组件按如下方式引用此html 现在，当我运行此命令
-
这是一个类似于使用XSLT设置内联文本和嵌套标记样式的问题，但我无法对其进行注释以获得澄清，因此我将在这里详细说明我的具体场景。我基本上有一个具有以下结构的XML文档： 我正在使用XSLT从XML文件中输出XHTML，并且我希望能够在上面示例中的place标记中的内容周围放置span标记或其他东西。其目的是使我可以用CSS为这些文本段设置样式。按照我上面提到的示例，我添加了以下内容： 当我在浏览器
-
问题内容： 我想设置某些元素的样式属性，但是语法不正确。谁能建议我错了？ 更新：对于任何查看此内容的人，请查看注释，这不是有效的代码。 问题答案： https://facebook.github.io/react/tips/inline- styles.html 您不需要引号。
-
问题内容： 我正在尝试将此代码添加到动态创建的div元素中 创建动态的代码是 我的想法是在之后添加样式，但我不知道该怎么做。 问题答案： 这应该向元素添加内联样式。
-
我在React web上使用样式化组件已经有一段时间了，但最近我开始开发一个React Native应用程序，我决定在中使用样式化的组件。当设计只有属性的组件时，比如默认的components，这是非常好的。 但是，我遇到的问题是，当我需要为具有多个样式属性的更复杂的组件设置样式时，例如、等。 当只有一个样式属性具有不同的名称时，我可以执行以下操作： 这完美无缺，但是当组件具有多种样式时，我不知道