如何在 React 中正确引用静态图像进行背景图像样式？

在React中访问BackgroundImage的静态图像

开发人员在React应用程序中访问内联backgroundImage样式的静态图像时可能会遇到挑战。以下常见语法方法尝试引用导入的图像：

<code class="javascript">import Background from '../images/background_image.png';

const sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};</code>

虽然此方法对于 可以完美运行，但标签，当应用于背景图像样式时它会失败。关键的差异在于 backgroundImage 属性中花括号的错误使用。

要解决此问题，正确的语法应省略花括号并确保背景是经过预处理的字符串（可能由第三方促进） webpack 和图像文件加载器等派对工具）。

<code class="javascript">backgroundImage: "url(" + Background + ")"</code>

或者，开发人员可以利用 ES6 字符串模板来实现相同的结果：

<code class="javascript">backgroundImage: `url(${Background})`</code>

通过实施这些修改，开发人员可以成功在其 React 应用程序中引用静态图像作为背景图像样式。

以上是如何在 React 中正确引用静态图像进行背景图像样式？的详细内容。更多信息请关注PHP中文网其他相关文章！