React 中的内联背景图像

Posted 2023-02-21

【中文标题】React 中的内联背景图像

【英文标题】：Inline background-image in React

【发布时间】：2018-01-30 02:33:13

【问题描述】：

我正在尝试通过 React 中的内联样式设置背景图像。

看了几篇帖子this one的解决方案对我有用：

<div className="phase1" style =  backgroundImage: "url('https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300')"  >

我将它直接粘贴到我的组件中，而没有更改链接只是为了测试它，并且它有效。但是现在我试图从我的/src 文件夹中引用一张图片，它不起作用。

<div className='background-image' style =  backgroundImage: "url('../../../../images/products/cards/main.jpg')"  >asdfasdfasdfasdf</div>

什么都没有出现，我也没有收到任何错误或警告。

任何帮助将不胜感激！

【问题讨论】：

查看此链接 - ***.com/questions/39195687/…

【参考方案1】：

你好

每个人都经过一些研究，我找到了一个更好的解决方案来解决这个问题

import BannerBgImg1 from "../../assets/static/img/banner/banner_bg_img_1.jpg";

<div className="bannerInnerItem" style=backgroundImage: `url($BannerBgImg1)` >

是最好的使用方法

【讨论】：

它应该是背景而不是 backgroundImage

【参考方案2】：

我希望背景图片很常见。所以请尝试使用它。这是非常容易使用。首先你应该导入 img 然后在你的 jxs 文件中轻松使用它。

import InnerBgImg from "../../assets/static/img/banner/inner_banner_bg_static.jpg";
return (
    <div className="inner_banner" style= backgroundImage: "url(" + InnerBgImg +")" >

【参考方案3】：

 const Images = [
    require('./greenbanner.jpg'),
    require('./greengrass.jpeg'),
    require('./opengreen.jpg')   ];

这是一个应该需要的图像数组 当它们无法加载时，我们需要它们

【参考方案4】：

我想通了，你不能直接将链接放入 url。你需要先require它。

var bg=require('../../../../images/products/cards/main.jpg')
return (      
  <div className="ProductItem">

      /* Background Image */
      <div className='background-image' style =  backgroundImage: "url("+bg+")"  ></div>

【讨论】：

这不是必需的，您只需要确保您尝试加载的图像位于公共路径中（如果您使用浏览器访问该路径，则图像可见）

@Miguel 有时您需要加载的图像不在公共路径中，您无法确保它会在