Использование webpack и url-загрузчика для загрузки встроенных изображений в React - PullRequest
Новая
       10

Использование webpack и url-загрузчика для загрузки встроенных изображений в React

0 голосов
/ 24 июня 2018

Мне нужно использовать встроенный стиль и передать URL-адрес файла изображения. Я делаю это так: 

let url = `url(${this.state.logo})`
        var cardStyle = {
            backgroundImage: url,
            backgroundSize: '200px 50px',
            backgroundRepeat: 'no-repeat'
        }

Затем используйте его в div следующим образом: 

<div className='work-card' style={cardStyle}></div>

URL-адрес будет свойством, передаваемым в виде «../images/logos/ciena.png», который представляет собой путь к изображению относительно компонента.

Однако, когда я запускаю приложение через веб-пакет, я получаю 404 изображения Ошибка приходит так: http://localhost:8080/images/logos/ciena.png 404 (Not Found)

Я использую url-загрузчик для загрузки изображений, и он работает нормально при использовании изображений в файлах scss, однако встроенный он не работает, и я не знаю, как это исправить.

Моя конфигурация Webpack: 

const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlWebpackPlugin = new HtmlWebPackPlugin({template: "./src/index.html", filename: "./index.html"});

module.exports = {
    output: {
        publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }, { // regular scss files to css
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            }, {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'url-loader',
                options: {
                    limit: 8000, // Convert images < 8kb to base64 strings
                    name: 'images/[name].[ext]'
                }
            }, {
                test: /\.(pdf|docx)$/,
                loader: 'file-loader?name=documents/[name].[ext]',
            }
        ]
    },
    devServer: {
        historyApiFallback: true
    },
    plugins: [htmlWebpackPlugin]
};

Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 24 июня 2018

Чтобы решить вашу проблему, обновите url-loader config до: 

{
  test: /\.(gif|png|jpg|svg)(\?.*$|$)/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,
        name: '[name].[ext]',
        publicPath: 'images/'
      },
    },
  ],
},
...