惰性延迟加载组件返回意外错误-加载器

Question

我正在尝试使用this reactjs library实现延迟加载。我要延迟加载的图像是一个下载URL（props.image），它是异步获取的，由购物车组件的父项（props）提供。

错误：

./node_modules/react-lazy-load-image-component/src/components/LazyLoadImage.jsx 46:9
Module parse failed: Unexpected token (46:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       } = this.props;
| 
>       return <img onLoad={this.onImageLoad()} {...imgProps} />;
|   }
|

我试图这样使用它：

import React from 'react';

import './Cart.css';

import LazyLoadImage from "react-lazy-load-image-component/src/components/LazyLoadImage";

const Cart = (props) => {

    const classList = (classes) => {
        return Object
            .entries(classes)
            .filter(entry => entry[1])
            .map(entry => entry[0])
            .join(' ');
    };

    const style = {
        transition: props.transition ? 'top 1s ease, transform 1s ease' : 'opacity .3s ease',
        top: props.top + 'px'
    };

    return (
        <div className="hs-image d-flex position-relative">
            <LazyLoadImage alt="Carousel Image" src={props.image} width={'100%'} height={'100%'} />
            <div className={classList({
                'hs-title': true,
                'display-none': !props.active,
                'hs-basic-text-animation': props.start
            })} style={style}>
                <h1 style={{color: props.start ? 'black' : 'white'}}>{props.title}</h1>
            </div>
        </div>
    );

};

export default Cart;

Answer 1

根据您粘贴的内容，似乎您尚未在Webpack配置中添加file-laoder。您需要安装file-laoder，还需要像这样添加配置

rules: [
      // some other loader configs
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
 ],