Webpack 4 - невозможно загрузить изображения с абсолютным путем в src, используя url-загрузчик

Question

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

Я создаю приложение React со следующей структурой проекта:

package.json
webpack.config.js
src
- images
- components
-- Display
--- Display.js
--- config.js
- Frame
-- Frame.js
index.js
index.html

Вот webpack.config.js:

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
    publicPath: "/"
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: "babel-loader" },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "[name].[ext]"
          }
        }
      },
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.json$/, loader: "json-loader" }
    ]
  },
  mode: "development",
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html"
    })
  ]
};

config.js предоставляет переменную с путем к изображению Display.js, которая затем передает ее Frame.js в качестве реквизита. Frame.js отображает изображение с указанным путем.

//config.js
export const imgPath = "/src/images/icon.gif";

//Display.js
import {imgPath} from "./config.js";
<Frame imgSrc={imgPath} />

//Frame.js
<img src={this.props.imgSrc} />

Проблема, с которой я сталкиваюсь, заключается в том, что изображение icon.gif не помещается в строку в комплекте javascript, а вместо этого браузер делает запрос на выборку файла, что не является ожидаемым поведением. Когда я создаю приложение в производственном режиме, изображение вообще не отображается.

Может ли кто-нибудь помочь мне понять это правильно? По сути, я сталкиваюсь с двумя проблемами:

1. Изображения не делаются встроенными в url-загрузчик
2. Изображения вообще не отображаются в производственной сборке.

Спасибо!

Answer 1

Вы должны сначала импортировать файл.Но так как ваш publicPath установлен на '/', а ваши изображения переданы в dist, фактический путь к изображению, которое вам нужно использовать, составляет /icon.gif.

1) Импортируйте все возможныефайлы (Обязательно используйте правильный путь здесь)

// includes.js

import './src/images/icon1.gif';
import './src/images/icon2.gif';
import './src/images/icon3.gif';

2) Экспорт функции пути к рабочему файлу

//config.js

import './includes.js';

export const imgPathFunc = num => `/icon${num}.gif`;

3) Импортируйте ее в Display.js

//Display.js

import { imgPath } from "./config.js";

{serverResponse && <Frame imgSrc={imgPath(serverResponse)} />}