Webpack - url-loader無法解析jpg

我在project-build和src的根目錄下有兩個文件夾。我想從src文件夾移動圖像來構建文件夾。但是，我收到錯誤「無法解析'文件'」，儘管我已經包含了url-loader插件。Webpack - url-loader無法解析jpg

header.jsx

import {React, ReactDOM} from '../../build/react'; 

export default class Header extends React.Component { 

    render() { 
    return (
     <div className="header"> 
     <img className="logo" src={require("../src/content/images/program-brand-logo.jpg")} /> 
     </div> 
    ); 
    } 
    };

錯誤日誌：

ERROR in ./src/components/header.jsx 
Module not found: Error: Cannot resolve 'file' or 'directory' ../src/content/images/program-brand-logo.jpg in /Users/username/Desktop/Projects/Demo/Scorecard/SPA/React (Working Copy)/src/components 
@ ./src/components/header.jsx 45:68-123

Webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 
require("babel-polyfill"); 

var BUILD_DIR = path.resolve(__dirname, 'build'); 
var APP_DIR = path.resolve(__dirname, 'src'); 

module.exports = { 
    entry: [ 
    // Set up an ES6-ish environment 
    'babel-polyfill', 
    'bootstrap-loader', 
    'webpack/hot/dev-server', 
    APP_DIR + '/import.js', 
    ], 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     loader: 'babel', 

     exclude: /node_modules/, 
     query: { 
     plugins: ['transform-runtime'], 
     presets: ['es2015', 'stage-0', 'react'] 
     } 
    }, { 
     test: /\.css$/, 
     loader: "style-loader!css-loader" 
    }, { 
     test: /\.scss$/, 
     loaders: ["style", "css", "sass"] 
    }, { 
     test: /\.(png|woff|woff2|eot|ttf|svg|jpg|gif)$/, 
     loader: 'url-loader?limit=100000' 
    }] 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }), 
    new webpack.HotModuleReplacementPlugin() 
    ] 
};

來源

2016-02-05 Rahul Dagli

你有沒有嘗試使用文件加載程序，而不是網址裝載機的極限= 100000 – Aaleks

你不必使用[R加載圖像的權限，您可以將其導入爲導入時的其他依賴項。

import img from './../src/content/images/program-brand-logo.jpg' 

..... 

<img className="logo" src={img} />

或我的事情，你應該指定路徑folow中'./../src/c ontent /圖片/節目品牌logo.jpg'

來源

2016-02-05 10:21:41

仍然得到同樣的錯誤信息：'錯誤在./src/components/header.jsx 模塊未找到：錯誤：無法解析'文件'或'目錄'./../src/content/images/program-brand-logo.jpg在/ Users /用戶名/桌面/項目/演示/記分卡/ SPA/React（工作副本）/ src/components @ ./src/components/header.jsx 29：24-81' –

解決！路徑不正確，我的不好。 –

確保這條道路../src/content/images/program-brand-logo.jpg是？相對於header.jsx文件

來源

2017-03-30 08:54:58

Webpack - url-loader無法解析jpg

回答

相關問題