Webpack связывает изображение PNG, но React его не отображает - PullRequest
Новая
       3

Webpack связывает изображение PNG, но React его не отображает

1 голос
/ 11 февраля 2020

Как видно из названия, веб-пакет собирается без нареканий. И я вижу, что файл образа был скопирован в каталог dist пакета, поэтому предположительно часть конфигурации test правильна.

Но веб-страница не может найти его, это просто квадрат с разбитым изображением. Должно быть, я прочитал около 15 существующих сообщений SO, но я здесь. Я пробовал и import версию и require версию:

import red_light from './red_light.png';

... или альтернативно ...

const red_light = require('./red_light.png');

с

<img src={red_light} />

Оба не могут найти изображение и загрузить его на страницу.

Также пытались напрямую требовать в JSX:

<img src={require('./red_light.png')} />.

Сбой тоже.

Конфигурация правил Webpack: 

...
rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {loader: "babel-loader"}
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: false
            }
          }
        ]
      },
      {
        test: /\.(jpg|png|svg)$/,
        loader: 'file-loader',
        // options: {
        //   name: '[path][name].[ext]',
        // },
      },
    ]
...

Я не знаю, что может заставить мою установку не работать.

Это показалось мне интересным: в браузере при проверке выданного html вместо любого URL-адреса просто отображается src=[Object module]. Возможно это нормально. Когда я наведите курсор мыши, он просто говорит: «Не удалось загрузить изображение».

Редактировать: я обнаружил, что оно работает в режиме dev , но не в режиме prod , то есть, когда все находится в ОЗУ, все работает, но если я делаю npm run build, он отправляет образ (ы) в (подкаталог) настроенного выходного каталога веб-пакета, но относительный импорт не работает внутри цели index.bundle.js. Файл prod html может, конечно, импортировать испускаемый индексный файл js, так как страница загружается. Я не понимаю, почему в веб-пакете недостаточно информации для настройки правильного относительного импорта, так как i) он сам отправил png-файл и ii) он может видеть исходный код реакции и знает, где находится каждый компонент относительно соответствующей точки входа , В основном, чтобы это работало, похоже, что в prod мне нужно было бы импортировать png-файл в файл реакции, но для атрибута src внутри тега img вручную записать относительный путь как внешний файл.

url-loader, однако, работает нормально, так как нет путаницы с относительным импортом в целевом объекте по сравнению с sr c.

1 Ответ

1 голос
/ 12 февраля 2020

Должно быть так 

{
  test: /\.(jpe?g|png|gif)$/i,
  loader: "file-loader"
},

Вы можете посмотреть мой полный конфиг здесь

Обновление: обычно webpack пытается найти файл, который находится в выходных данных dir в вашей конфигурации вот так 

output: {
    path: path.resolve(__dirname, "wwwroot/dist"),
    filename: "[name].js",
    publicPath: "/dist/"
},

Так что он будет искать файл в папке wwwroot

...