reactjs - 反应图像加载

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;

所以我得到：

并且浏览器向服务器发送以下请求以加载图像：请求 URL：http://localhost:3100/08f1a78cea5a9873b84bb8936664277b.png

这没关系。

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

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

这是 imageSTore.names() 返回的值： Array(55) "IndoorEnvironmentObserved/湿度/湿度警报-128.png" "IndoorEnvironmentObserved/湿度/湿度警报-16.png" "IndoorEnvironmentObserved/湿度/湿度警报-24.png" "IndoorEnvironmentObserved/湿度/湿度警报-32.png" "IndoorEnvironmentObserved/湿度/湿度警报-48.png" "IndoorEnvironmentObserved/湿度/湿度警报-64.png" "IndoorEnvironmentObserved/湿度/湿度-normal-128.png" "IndoorEnvironmentObserved/湿度/湿度-normal-16.png" "IndoorEnvironmentObserved/湿度/湿度-normal-24.png" "IndoorEnvironmentObserved/湿度/湿度-normal-32.png" "IndoorEnvironmentObserved/湿度/湿度-正常-48.png" "IndoorEnvironmentObserved/湿度/湿度正常-64.png" "IndoorEnvironmentObserved/temperature/temperature-alert-128.png" "IndoorEnvironmentObserved/temperature/temperature-alert-16.png" "IndoorEnvironmentObserved/temperature/temperature-alert-24.png " "IndoorEnvironmentObserved/temperature/temperature-alert-32.png" "IndoorEnvironmentObserved/temperature/temperature-alert-48.png" "IndoorEnvironmentObserved/temperature/temperature-alert-64.png" "IndoorEnvironmentObserved/temperature/temperature-normal-128 .png" "IndoorEnvironmentObserved/temperature/temperature-normal-16.png" "IndoorEnvironmentObserved/temperature/temperature-normal-24.png" "IndoorEnvironmentObserved/temperature/temperature-normal-32.png" "IndoorEnvironmentObserved/temperature/temperature-normal-48.png" "IndoorEnvironmentObserved/temperature/temperature-normal-64.png" "WeatherObserved/湿度/湿度警报-128.png" "WeatherObserved/湿度/湿度警报-16.png " "WeatherObserved/湿度/湿度警报-24.png" "WeatherObserved/湿度/湿度警报-32.png" "WeatherObserved/湿度/湿度警报-48.png" "WeatherObserved/湿度/湿度警报-64 .png" "WeatherObserved/湿度/湿度-正常-128.png" "WeatherObserved/湿度/湿度-正常-16.png" "WeatherObserved/湿度/湿度-正常-24.png" "WeatherObserved/湿度/湿度-正常-32.png" "WeatherObserved/湿度/湿度正常-48.png" "WeatherObserved/湿度/湿度正常-64。png" "WeatherObserved/温度/温度警报-128.png" "WeatherObserved/温度/温度警报-16.png" "WeatherObserved/温度/温度警报-24.png" "WeatherObserved/温度/温度警报- 32.png" "WeatherObserved/temperature/temperature-alert-48.png" "WeatherObserved/temperature/temperature-alert-64.png" "WeatherObserved/temperature/temperature-normal-128.png" "WeatherObserved/温度/温度- normal-16.png" "WeatherObserved/temperature/temperature-normal-24.png" "WeatherObserved/temperature/temperature-normal-32.png" "WeatherObserved/temperature/temperature-normal-48.png" "WeatherObserved/温度/ temperature-normal-64.png" "本地化/localized-no-24.png" "本地化/localized-no-32.png" "localized/localized-no-48.png" "localized/localized-yes-24.png" "localized/localized-yes-32.png" "localized/localized-yes- 48.png" "未找到.png"

我不知道如何解决这个问题。任何想法？

谢谢。蒂博。

标签： reactjs