使用 react、webpack 和 express 无法在浏览器中加载图像

Posted 2023-02-22

【中文标题】使用 react、webpack 和 express 无法在浏览器中加载图像

【英文标题】：Images are not loading in browser with react, webpack and express

【发布时间】：2017-12-27 00:29:02

【问题描述】：

我正在开发一个基于 react 的网站。在我实施 express 之前它工作正常。执行 express 后，我无法加载某些资源，尤其是浏览器中的图像。图像路径正确，但图像未在浏览器中显示。

webpack.config.js 是：

var path = require('path');
var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = 
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, 'app/index.js')
  ],
  output: 
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  ,
  plugins: [
    new ExtractTextPlugin('/bundle.css',  allChunks: true ),
    new HtmlWebpackPlugin(
      template: 'app/index.html',
      inject: 'body',
      filename: 'index.html'
    ),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin(
      'process.env.NODE_ENV': JSON.stringify('production')
    )
  ],
  resolve: 
    extensions: ['', '.scss', '.css', '.js', '.json'],
    modulesDirectories: [
      'node_modules',
      path.resolve(__dirname, './node_modules')
    ]
  ,
  module: 
    loaders: [
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: 
        "presets": ["react", "es2015", "stage-0", "react-hmre"]
      
    , 
      test: /\.json?$/,
      loader: 'json'
    , 
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass')
    , 
        test: /\.css$/,
        loader: 'style-loader!css-loader'
    ,
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: "url-loader?limit=10000"
    ,
        test: /\.less$/, loader: "style-loader!css-loader!less-loader"
    ,
        test: /\.(ttf|eot|svg|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
        loader: "file-loader"
    ]
  
;

server.js文件内容如下：

const path = require("path");  
const express = require("express");  
const webpack = require("webpack");  
const webpackDevMiddleware = require("webpack-dev-middleware");  
const webpackHotMiddleware = require("webpack-hot-middleware");  
const config = require("./webpack.config.js");

const app           = express(),  
      DIST_DIR      = path.join(__dirname, "dist"),
      HTML_FILE     = path.join(DIST_DIR, "index.html"),
      isDevelopment = process.env.NODE_ENV !== "production",
      DEFAULT_PORT  = 3000,
      compiler      = webpack(config);

app.set("port", process.env.PORT || DEFAULT_PORT);

if (isDevelopment)   
    app.use(webpackDevMiddleware(compiler, 
        publicPath: config.output.publicPath
    ));

    app.use(webpackHotMiddleware(compiler));

    app.get("*", (req, res, next) => 
        compiler.outputFileSystem.readFile(HTML_FILE, (err, result) => 
            if (err) 
                return next(err);
            
            res.set('content-type', 'text/html');
            res.send(result);
            res.end();
        );
    );


else   
    app.use(express.static(DIST_DIR));

    app.get("*", (req, res) => res.sendFile(HTML_FILE));


app.listen(app.get("port"));

package.json如下：

"main": "server.js",
  "script": 
    "start": "babel-node server-es6.js",
    "build:server": "babel server-es6.js --out-file server.js",
    "build:client": "webpack -p --config webpack.config.js --progress"
  ,

网站正在加载，但某些 CSS 未加载。控制台抛出错误：

GET http://bundle.css/ net::ERR_NAME_NOT_RESOLVED

图像路径正确显示为http://localhost:3000/img/img1.png，但它没有显示在浏览器中。我认为问题在于 webpack 公共路径。

当我使用<img src=require('/images/image-name.png') /> 时，它工作正常。但我不想这样做，因为它的代码库非常繁重，而且我认为这不是一个好的解决方案。

我得到了webpack-express-boilerplate的帮助。

在 chrome 网络工具中，图像类型为 text/html。

【参考方案1】：

如果你的文件路径是静态的，你可以将文件导入一次，然后作为 src 提供

import image from '/path/to/images/image-name.png';
...
<img src=image />

【讨论】：

我有一些来自静态内容的图片和一些来自动态内容的图片。

动态图像是驻留在本地还是来自服务器