反应图片加载

Question

我需要从文件夹动态加载图像。

我确实将图像存储在src / client / img中，并且编写了一个简单的组件来加载png文件：

class ImageStore {

  constructor() {
    var r = require.context('../img', true, /\.(png)$/)

    this.images = {};
    r.keys().map((item, index) => { this.images[item.replace('./', '')] = r(item); });
  }

  names() {
    return Object.keys(this.images);
  }

  image(name) {
    var img = this.images[name];

    if( !img ) {
      throw `Image not found: ${name}`;
    }

    return img;
  }
}

export const imageStore = new ImageStore();

在我的主页上，它运行正常：

class HomeView extends React.PureComponent {
   render() {
      return (
         <div>
            <h2>Images</h2>
            <table><tbody>
              {
                imageStore.names().map( (imageName) => (
                    <tr key={imageName}><td>{imageName}</td><td><img src={imageStore.image(imageName)}/></td></tr>
                ))
              }
              </tbody>
            </table>
         </div>
      );
   }
}
export default HomeView;

所以我得到：

浏览器将以下请求发送到服务器以加载图像： 请求网址：http://localhost:3100/08f1a78cea5a9873b84bb8936664277b.png

哪个还可以。

但是... 当我在由http://localhost:3000/space/10002之类的路线显示的页面中包含相同的代码时，找不到图像，因为浏览器添加了“ / space” URL前缀。

这是请求： 要求网址：http://localhost:3100/space/d7f44567c7944ac4cc4cd00e3e140282.png 请求方法：GET 状态码：404未找到

这是imageSTore.names（）返回的值： 数组（55） “观察到的室内环境/湿度/湿度-alert-128.png” “观察到的室内环境/湿度/湿度-alert-16.png” “观察到的室内环境/湿度/湿度-alert-24.png” “观察到的室内环境/湿度/湿度-alert-32.png” “观察到的室内环境/湿度/湿度-alert-48.png” “室内环境可观察/湿度/湿度-alert-64.png” “室内环境观察/湿度/湿度正常128.png” “室内环境观察/湿度/湿度正常-16.png” “观察到的室内环境/湿度/湿度正常-24.png” “室内环境观察到/湿度/湿度正常32.png” “室内环境可观察/湿度/湿度-正常-48.png” “室内环境观察到/湿度/湿度正常64.png” “室内环境观察/温度/temperature-alert-128.png” “室内环境观测/温度/temperature-alert-16.png” “室内环境观察/温度/temperature-alert-24.png” “室内环境观察/温度/temperature-alert-32.png” “室内环境观察/温度/temperature-alert-48.png” “室内环境观察/温度/temperature-alert-64.png” “室内环境观察/温度/温度正常-128.png” “室内环境观测/温度/温度正常-16.png” “室内环境观察/温度/温度正常-24.png” “室内环境观察/温度/temperature-normal-32.png” “室内环境观察/温度/温度正常-48.png” “室内环境观察/温度/temperature-normal-64.png” “天气观测到的/湿度/湿度-alert-128.png” “ WeatherObserved /湿度/湿度-alert-16.png” “ WeatherObserved /湿度/湿度-alert-24.png” “ WeatherObserved /湿度/湿度-alert-32.png” “天气观测到的/湿度/湿度-alert-48.png” “ WeatherObserved /湿度/湿度-alert-64.png” “ WeatherObserved /湿度/湿度正常-128.png” “ WeatherObserved / humidity / humidity-normal-16.png” “ WeatherObserved /湿度/湿度正常-24.png” “ WeatherObserved / humidity / humidity-normal-32.png” “天气观测到的/湿度/湿度正常-48.png” “ WeatherObserved / humidity / humidity-normal-64.png” “ WeatherObserved / temperature / temperature-alert-128.png” “ WeatherObserved / temperature / temperature-alert-16.png” “ WeatherObserved / temperature / temperature-alert-24.png” “ WeatherObserved / temperature / temperature-alert-32.png” “ WeatherObserved / temperature / temperature-alert-48.png” “ WeatherObserved / temperature / temperature-alert-64.png” “ WeatherObserved / temperature / temperature-normal-128.png” “ WeatherObserved / temperature / temperature-normal-16.png” “ WeatherObserved / temperature / temperature-normal-24.png” “ WeatherObserved / temperature / temperature-normal-32.png” “ WeatherObserved / temperature / temperature-normal-48.png” “ WeatherObserved / temperature / temperature-normal-64.png” “ localized / localized-no-24.png” “ localized / localized-no-32.png” “ localized / localized-no-48.png” “ localized / localized-yes-24.png” “ localized / localized-yes-32.png” “ localized / localized-yes-48.png” “ notFound.png”

我不知道该如何解决。 有想法吗？

谢谢。 蒂博。