React 中的内联背景图像

Question

我正在尝试通过 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>

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

任何帮助将不胜感激！

Answer 1

你好

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

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

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

是最好的使用方法

Answer 2

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

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

Answer 3

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

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

Answer 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>