我是craet React/Express应用程序，我有一个图像问题。他们不显示-“无法加载图像”。
CSS样式加载，但图像不加载。
我怀疑，问题在服务器端与静态文件。
快递代码：

import express from 'express';
import ReactDOM from 'react-dom/server';
import { indexTemplate } from './indexTemplate';
import App from "../App";

const app = express();

app.use('/static', express.static('./dist/client'));

app.get('/', (req, res) => {
  res.send(
    indexTemplate(ReactDOM.renderToString(App()),)
  );
});

app.listen(3000, () => {
  console.log('Server started, on http://localhost:3000');
});

CSS代码，我使用图像作为背景：

.main {
    display: block;
    width: 100%;
    height: 500px;
    background: url("../../static/img1.jpg");
    background-size: cover;
}

我的客户端webpack配置：

const path = require( 'path' );
const { HotModuleReplacementPlugin } = require( 'webpack' );
const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );

const NODE_ENV = process.env.NODE_ENV;
const IS_DEV = NODE_ENV === 'development';
const IS_PROD = NODE_ENV === 'production';
const GLOBAL_CSS_REGEXP = /\.global\.css$/;

function setupDevtool() {
  if ( IS_DEV ) {
    return 'eval';
  }

  if ( IS_PROD ) {
    return false;
  }
}

module.exports = {
  mode: NODE_ENV ? NODE_ENV : 'development',
  resolve: {
    extensions: [ '.js', '.jsx', '.ts', '.tsx', '.json' ],
    alias: {
      'react-dom': 'react-dom',
    }
  },
  entry: [
    path.resolve( __dirname, '../src/client/index.jsx' ),
    'webpack-hot-middleware/client?path=http://localhost:3001/static/__webpack_hmr',
  ],
  output: {
    path: path.resolve( __dirname, '../dist/client' ),
    filename: 'client.js',
    publicPath: '/static/',
  },
  module: {
    rules: [
      {
        test: /\.[tj]sx?$/,
        use: [ 'ts-loader' ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                mode: 'local',
                localIdentName: '[name]__[local]--[hash:base64:5]'
              }
            }
          }
        ],
        exclude: GLOBAL_CSS_REGEXP
      },
      {
        test: GLOBAL_CSS_REGEXP,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(jpe?g|gif|png|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      }
    ]
  },
  devtool: setupDevtool(),
  plugins: IS_DEV
    ? [
      new CleanWebpackPlugin(),
      new HotModuleReplacementPlugin(),
    ]
    : [],
};

我的服务器webpack配置：

const path = require("path");
const nodeExternals = require("webpack-node-externals");
const NODE_ENV = process.env.NODE_ENV;
const GLOBAL_CSS_REGEXP = /\.global\.css$/;

module.exports = {
  target: "node",
  mode: NODE_ENV ?? "development",
  entry: path.resolve(__dirname, "../src/server/server.js"),
  output: {
    path: path.resolve(__dirname, "../dist/server"),
    filename: "server.js",
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.[tj]sx?$/,
        use: [ 'ts-loader' ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                mode: 'local',
                localIdentName: '[name]__[local]--[hash:base64:5]'
              }
            }
          }
        ],
        exclude: GLOBAL_CSS_REGEXP
      },
      {
        test: GLOBAL_CSS_REGEXP,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(jpe?g|gif|png|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
  },
};