Как рендерить изображения с помощью webpack + реакции?

Question

Я довольно новичок, чтобы отреагировать и веб-пакет, и я получаю эту странную проблему, которую я не понимаю.

Проблема:

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

моя структура:

веб-пакет:

const path = require("path");
const webpack = require("webpack");

const bundlePath = path.resolve(__dirname, "dist/");

module.exports = {
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["env"], plugins: ["transform-class-properties"] },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["eslint-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },

      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {},
          },
        ],
      },
    ],
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    publicPath: bundlePath,
    filename: "bundle.js",
  },
  devServer: {
    contentBase: path.join(__dirname, "public"),
    port: 8080,
    publicPath: "http://localhost:8080/dist",
    historyApiFallback: true,
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
};

Что мне не хватает?

EDIT:

импортировать изображение так:

import headerImage from "../../../../public/images/MyImage.jpg"

сделать так:

class Header extends Component {
    linkClick = event => {
      if (this.props.properties.movment.position.x > 0) event.preventDefault();
    };
    render() {
      return (

              <Navbar inverse fluid >

              <Navbar.Header>
                <Navbar.Brand>
               <Image src={headerImage}/>
                </Navbar.Brand>
                <Navbar.Toggle />
              </Navbar.Header>

              <Navbar.Collapse>
                <Nav pullRight>
                <HeaderLinks linkClicked={this.linkClick} />
                </Nav>
              </Navbar.Collapse>

              </Navbar>
      );
    }
}

Answer 1

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

Кроме того, @Olivier Boissé изменил конфику веб-пакета в качестве подсказки по ссылке

test: /\.(jpe?g|png|gif|svg)$/i,
loader: "file-loader?name=/public/images/[name].[ext]",
options: {
  limit: 100000,
},

, а также:

  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist/",
    filename: "bundle.js",
  },

Answer 2

var requireImages = require.context('../public/images', true, /\.(jpg|png|gif|svg)$/);

Вы можете добавить вышеуказанный код в файл index.js, чтобы напрямую ссылаться на ваши изображения из любой точки приложения.

Вы также можете использовать <Image src="./public/images/MyImage.jpg" /> в заголовочном файле, не импортируя каждое изображение отдельно.

Редактировать: пожалуйста, проверьте путь и убедитесь, что он указывает на изображения в папке dist> public> images