वेबपैक देव सर्वर को स्थानीय रूप से संग्रहीत छवियों को प्रदर्शित करने के लिए कैसे प्राप्त करें?

Question

मैंने एक प्रोजेक्ट माइग्रेट किया है जिसे मैं वेबपैक 2 पर काम कर रहा हूं और यह एक सिरदर्द रहा है। लेकिन मुझे वेबपैक देव सर्वर का उपयोग करके पूर्वावलोकन करने के लिए मेरा प्रोजेक्ट प्राप्त हुआ है, सिवाय इसके कि यह मेरी छवि नहीं दिखाएगा।

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]' 
      } 
     ], 
     }, 
    } 

प्रवास से अधिक चित्रों का टूट गया है लेकिन यहाँ एक और:

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 विन्यास है: सभी मैं ब्राउज़र कंसोल GET http://localhost:8080/logo.jpg 404 (Not Found)

MacOS कंसोल में और में इस त्रुटि है मैं इसे दूसरों को ठीक करने के लिए आधार के रूप में उपयोग कर सकता हूं:

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

Answer 2

आप इस गाइड की समीक्षा करनी चाहिए: https://webpack.js.org/guides/migrating/

आप webpack1 के लिए पुराने स्वरूप config, नीचे webpack2 के लिए config का उपयोग करें;

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.png यह /assets/my-image

Answer 4

करने के लिए परिवर्तन मुझे लगता है कि मैं इस मुद्दे को पता है । आयात करते समय आप छवि के लिए सही पथ निर्दिष्ट नहीं कर रहे हैं। तो फिर इस तरह अपनी छवियों को आयात छवि फ़ोल्डर

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, 
    }, 
    },