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

Question

我将我一直在研究的项目迁移到Webpack 2,这一直很令人头痛.但我已经让我的项目使用Webpack dev服务器进行预览,除了它不会显示我的图像.我得到的只是浏览器控制台中的这个错误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

您的 webpack 配置未明确声明output.publicPath设置。基本配置可能类似于：

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

进一步考虑：既然您的logo.jpg组件与组件位于同一目录中，为什么不使用./相对路径导入它呢？

import Logo from "./logo.jpg";