Question

我使用Webpack和create-react-app工具创建了我的第一个React应用程序。

我想在随机显示的应用程序背景文件夹中有未知数量的图像。使用Webpack docs和其他threads中的一些代码，我在组件中使用此代码。

import React, { Component } from 'react';

import './styles/css/App.css';

function requireAll(r) { 
   r.keys().forEach(r); 
   var images = r.keys();
   images = images.map( path => "./images/backgrounds/" + path );
   console.log(images);
   return images;
}

var images = requireAll(require.context('./images/backgrounds/', true, /\.jpg$/));

let randomIndex = Math.floor(Math.random() * images.length) + 0;

var randomImgRef = images[randomIndex];

class App extends Component {
  render() {
    return (
      <div className="App" style={{backgroundImage: "url(" + randomImgRef + ")"}} >
        <h1>hi</h1>
      </div>
    );
  }
}

export default App;

这似乎有效，背景样式有正确的路径，我的控制台也记录正确的路径。但是没有显示图像，而且我一无所知。

我认为Webpack可能不会在构建中包含图像，尽管我使用的代码似乎应该这样做。所以我一无所知。

有什么想法吗？

Answer 1

我认为对于您的示例，您只需要使用 randomImgRef.default，因此请使用默认属性来获取网址。

示例使用 require.context 显示图像：

const photos = importAll(require.context('../../assets/photos', false, /\.(png|jpe?g|svg)$/));

渲染：

<div>
    {photos.map((photo, i) => (
        <div className="photo" key={i}>
            <img src={photo.default} alt=`photo-${i}` />
        </div>
    ))}
</div>

使用require.context使用webpack显示图像

1 个答案: