我想在背景中显示随机图像，但代码不起作用答案

【问题标题】：I want to display random images in background but the code is not working我想在背景中显示随机图像，但代码不起作用
【发布时间】：2020-06-10 08:32:39
【问题描述】：

它只是显示一个空白背景，其中没有任何内容。我已经尝试了下面的代码，仅在 stackoverflow 上看到了这个，但似乎无法让它工作。请帮忙。路线正确。

class Landing extends Component {
  render() {

    var images = ['1.gif','2.gif','3.gif','4.gif','5.webp','6.gif','7.gif']

    return (
      <div className="landing" style = {{background: `url("./img/${images[Math.floor(Math.random() * images.length)]}")`}} >
        <div className="dark-overlay landing-inner text-light">
          <div className="container">
            <div className="row">
              <div className="col-md-12 text-center">
                <h1 className="display-3 mb-4">Developer Connector</h1>
                <p className="lead">
                  Create a developer profile/portfolio, share posts and get help
                  from other developers
                </p>
                <br/>
                <Link to="/register" className="btn btn-lg btn-info mr-2">
                  Sign Up
                </Link>
                <Link to="/login" className="btn btn-lg btn-light">
                  Login
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Landing;

【问题讨论】：

标签： javascript css reactjs image random

【解决方案1】：

这段代码可能是 webpack 的字符串。你应该使用require 你可以这样做

var images = [
{
uri: require('./img/1.gif'),
title: 'title',
alt: 'alt'
},
{
uri: require('./img/2.gif'),
title: 'title',
alt: 'alt'
}
]

【讨论】：