Вопрос:

Webpack & React. Загруженное изображение не может разрешить путь 404

reactjs webpack webpack-2

724 просмотра

1 ответ

683 Репутация автора

В этом случае я пытаюсь настроить своего рода компонент высокого порядка и дополнительно реализовать для него «динамическую» загрузку изображений. Можете ли вы объяснить, что было сделано неправильно, чтобы ссылаться на внутри компонента.

Реагировать Компонент

class Slide extends Component {
  constructor(props) {
    super(props)
  }

  render () {

    let imageLeft = {
     backgroundImage: 'url(./assets/introleft.png)'
    }

    return (
      <div className={styles.someStyles}>
        <div className={styles.someStyles} style={imageLeft} >&nbsp;</div>
      </div>
    )
  }

}

... state

export default connect(mapStateToProps)(Slide);

Структура проекта

введите описание изображения здесь

Конфигурация Webpack

const path = require('path'),
      webpack = require('webpack'),
      HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: [
    'react-hot-loader/patch', 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/only-dev-server',  
    './index.js'
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build'), 
    publicPath: '/'
  },  
  context: path.resolve(__dirname, 'logic'), 
  devtool: 'inline-source-map',    
  devServer: {
    hot: true, 
    contentBase: path.resolve(__dirname, 'build'),
    publicPath: '/'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
        ],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader?modules',
          'postcss-loader',
        ],
      },{
        test: /\.png$/,
        use: { loader: 'url-loader', options: { limit: 15000 } },
      },
      {
        test: /\.svg$/,
        use: {
          loader: 'svg-url-loader',
          options: {}
      }
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
      template: './index.template.html'
    })<script> tag
  ],
};

PS: Проект не имеет node.jsсервера, просто wepback-dev. Так что реагирующий маршрутизатор использует историю хешей / #, wounder, если это как-то влияет на свойство webPack publicPath .

Автор: volna Источник Размещён: 04.03.2017 03:02

Ответы (1)


1 плюс

16551 Репутация автора

Решение

Когда вы используете backgroundImage: 'url(./assets/introleft.png)', он будет вставлен как есть (это просто строка), поэтому вы url-loaderне будете применены к нему. Вместо этого вы должны импортировать изображение:

import introleft from './assets/introleft.png';

Webpack будет применять, url-loaderи вы получите либо URL-адрес данных, либо URL-адрес извлеченного изображения, если размер был слишком велик. Все, что вам нужно сделать сейчас, это вставить этот URL в ваш backgroundImage:

backgroundImage: `url(${introleft})`
Автор: Michael Jungo Размещён: 04.03.2017 04:10
Вопросы из категории :
32x32