你好

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

我想通了，你不能直接把链接放到网址中。您需要先require。

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

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

Answer 2

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

这是需要的一系列图像
当它们无法加载时，我们需要要求它们

Answer 3

我希望Background Img非常常见。因此，请尝试使用它。这是非常容易使用。首先，您应该导入img，然后在jxs文件中轻松使用它。

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

Answer 4

你好

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

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

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

是使用此功能的最佳方式

React中的内联背景图像

4 个答案:

你好