Reactjs - div的背景图像不起作用

Posted 2023-03-06

【中文标题】Reactjs - div的背景图像不起作用

【英文标题】：Reactjs - background image of a div is not working

【发布时间】：2018-10-16 15:26:44

【问题描述】：

我正在尝试在组件中添加 div 的背景图像，但它不起作用。

slides.map((item) => 
                return (
                    <div key=item.id className="item_slider"
                         style=background: `url(/images/covers/$item.cover)`
                    >
                        <div className="caption">
                            <h4>item.topic</h4>
                            <p>item.title</p>
                        </div>
                    </div>
                )
            )

item_slider css

.item_slider 
    height: 700px;
    background-size: cover !important;
    background-position: center center !important;
    position: relative;
    font-family: 'Fjalla One', sans-serif;

图像在公共文件夹中，虽然我也将它们复制到 src 文件夹中，但没有运气。谁能帮我解决这个问题？

【问题讨论】：

尝试使用backgroundImage代替背景，react style属性是驼峰式的:)

两种都试过了，都没有成功

【参考方案1】：

尝试使用您自己的网址

class App extends React.Component 
  constructor(props) 
    super(props);
    this._size = '350x150'
    this._style = 
      backgroundImage: `url(http://via.placeholder.com/$this._size)`
    
  
  render() 
    return ( 
      <div style=this._style className="example">
        <h1>Content here</h1>
      </div>
    )
  


ReactDOM.render( < App / > , document.getElementById("root"));

.example 
  background-size: cover !important;
  background-position: center center !important;
  position: relative;
  height: 300px;
  font-family: 'Fjalla One', sans-serif;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

所以，你的风格应该有效，除了backgroundImage：

...
style=backgroundImage: `url(/images/covers/$item.cover)`
...

只要确保你的路径是正确的并且$item.cover 确实有一个值。如果它仍然不起作用，不妨尝试将该样式从 CSS 移到您的内联样式中，因为它仍然是同一个元素。

【讨论】：

我怀疑您的数据或路径存在问题。尝试使用包含 http 的完整 URL。或者，您可以尝试不使用模板文字并使用经典方式：url('/images/covers/' + item.cover)。顺便问一下，你的项目是create-react-app生成的吗？

【参考方案2】：

试试这个：

style=backgroundImage: 'url(' + require(`/images/covers/$item.cover`) + ')'

如果不起作用，请尝试使用图片 URL：

const url = "https://images.freeimages.com/images/large-previews/f2c/effi-1-1366221.jpg";

和：

style=backgroundImage: 'url(' + require(`url`) + ')'

这行得通吗？如果是这样，则问题可能出在图像路径上。 把图片放到组件的同一个文件夹里然后试试（我假设图片名是zzz.jpg：

style=backgroundImage: 'url(' + require(`./zzz.jpg`) + ')'

如果这也有效，请再次检查路径...

【讨论】：

也试过了。它显示未找到模块。无法解析“/images/covers”