Webpack - url-loader не может решить jpg

У меня есть две папки в корневой директории проекта - 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

ли вы попробуйте использовать файл-загрузчик вместо URL-загрузчиком предел = 100000 – Aaleks

вы не должны использовать г equire для загрузки изображений, которые вы можете импортировать в качестве других зависимостей с импортом.

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/username/Desktop/Projects/Demo/Scorecard/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

ответ

Смежные вопросы