ローカルに保存された画像を表示する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]' 
      } 
     ], 
     }, 
    } 

移行は複数の画像を破らが、HERESに1しており、私はそれを他のものを修正するためのベースとして使用することができます：

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')を使用しますか？なぜdevサーバはイメージを見つけて表示しないのですか？

EDIT

はしてみました：

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"; 

Answer 2

あなたは、このガイドを確認する必要があります。 https://webpack.js.org/guides/migrating/

あなたは以下のwebpack2用設定ファイル、webpack1の古い形式の設定を使用します。

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 3

これは、パス・問題のようです、多分代わりにあなたのイメージのための相対パスの絶対パスに切り替えてみてください：すなわち代わりに/assets/my-image

Answer 4

から../assets/my-image.png変更、それを私はこの問題を知っていると思います。インポート時にイメージの正しいパスを指定していません。そして、このようなあなたのイメージをインポート画像フォルダ

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 5

指定絶対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, 
    }, 
    },