如何让 Webpack Dev Server 显示本地存储的图片？

Question

我将一个我一直在做的项目迁移到了 Webpack 2，这有点让人头疼。但是我已经让我的项目使用 Webpack 开发服务器进行预览，除了它不会显示我的图像。我得到的只是浏览器控制台中的这个错误 GET http://localhost:8080/logo.jpg 404 (Not Found)

在 MacOS 控制台中：

   ERROR in ./js/components/Global/Menu.jsx Module not found: Error: Can't resolve 'logo.jpg' in '/Users/user1/Documents/AAA/app/js/components/Global'

这是我的 Webpack 配置：

    const path = require('path');

    module.exports = {
      context: __dirname + "/app",

      entry: {
        app: "./js/app.js",
        javascript: "./js/app.js",
        html: "./index.html",
      },

      output: {
        //output.path: "[name].js",
        path: __dirname + "/dist",
        filename: "[name].js"
      },

      resolve: {
        alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' },
        extensions: [ '*', '.js', '.jsx', '.json'],
        modules:[__dirname, './app/js', 'node_modules'],
      },

      module: {
        rules: [
          {
            test: /\.jsx?$/,
            include: [
              path.resolve(__dirname, "app")
            ],
            loaders: ["babel-loader"],
          },
          {
            test: /\.html$/,
            loader: ["file-loader?name=[name].[ext]"],
          },
          {
            test: /\.(jpe?g|png|gif|svg)$/i,
            include : path.join(__dirname, 'app'),
            loader  : 'url-loader?limit=30000&name=images/[name].[ext]'
          }
        ],
      },
    }

迁移破坏了多个图像，但这是一个，我可以用它作为修复其他图像的基础：

import React, { Component } from 'react';
import { Link } from 'react-router';

import Logo from "logo.jpg";

export default class Menu extends Component {
  render() {
    return (
      <div className='Menu' id='Menu'>
        <img src={Logo}></img>
        <Link to='/'>Home</Link>  <Link to='/about'>Clothing</Link>  <Link to='/Cart'>Cart</Link>
        <hr />
      </div>
    );
  }
}

我应该使用 url('logo.jpg') 吗？为什么开发服务器找不到图像并显示它们？

编辑

尝试过：

let img = new Image();
img.src = require('logo.jpg');

和<img src={img.src}>，但它给了我同样的错误。

Answer 1

您应该查看本指南： https://webpack.js.org/guides/migrating/

您对 webpack1 使用旧格式配置，下面为 webpack2 使用旧格式配置；

module: {
rules: [
  {
    test: /\.jsx?$/,
    include: [
      path.resolve(__dirname, "app")
    ],
    use: ["babel-loader"],
  },
  {
    test: /\.html$/,
    use: [{
        loader: 'file-loader',
        options: {
           name: '[name].[ext]'
        }
    }],
  },
  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    include : path.join(__dirname, 'app'),
    use: [{
        loader: 'url-loader',
        options: {
           limit: 30000,
           name: '[name].[ext]'
        }
    }]
  }
],
  },

Answer 2

我想我知道这个问题了。导入时没有为图像指定正确的路径。尝试为图像文件夹添加别名

resolve: {
    alias: { 
      'react/lib/ReactMount': 'react-dom/lib/ReactMount',
      images: '/Users/user1/Documents/AAA/app/js/components/Global', // absolute path to images folder
    },
    extensions: [ '*', '.js', '.jsx', '.json'],
    modules:[__dirname, './app/js', 'node_modules'],
  },

然后像这样导入图像：

import Logo from 'images/logo.jpg';

Answer 3

指定绝对 publicPath 对我有用。 Reference

 {
    test: /\.(png|jpg)$/,
    include: path.join(__dirname, '/app'),
    loader: 'url-loader',
    query: {
      outputPath: path.join(__dirname, '/app/dist'),,
      publicPath: 'http://localhost:8080/',
      emitFile: true,
    },
  },

Answer 4

您的 webpack 配置没有明确声明 output.publicPath 设置。基本配置可能是这样的：

  output: {
    publicPath: '/',
    path: __dirname + "/dist",
    filename: "[name].js"
  },

进一步考虑： 因为你的 logo.jpg 和你的组件在同一个目录下，为什么不导入它./相对路径？

import Logo from "./logo.jpg";

Answer 5

实际上，您只需将该图像添加到 public 文件夹中，您就可以直接将其用作 <img src="logo.png" />

如何让 Webpack Dev Server 显示本地存储的图片？

How to get Webpack Dev Server to display images stored locally?

javascript

reactjs

webpack

webpack-dev-server