Развернутое портфолио React на Heroku не отображает изображения

Question

Я развернул свое портфолио на Heroku, https://tomdoan.herokuapp.com/

На локальном компьютере изображения отображаются нормально, поэтому я предполагаю, что путь, заданный в Webpack, правильный

Развернуто на Heroku, похоже, что их производственная машина не распознает путь.

Я новичок в React / Deployment

В консоли кажется, что heroku не распознает указанный мной путь, я думаю / я предполагаю, что рабочий сервер мог изменить путь

Был бы очень признателен, спасибо

// package.json file

{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"express": "^4.17.1",
"history": "^4.9.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.1",
"webpack": "^4.34.0",
"webpack-cli": "^3.3.4"
},
"engines": {
"node": "10.16.0",
"npm": "6.9.0"
},
"scripts": {
"start": "webpack && node index.js",
"build": "webpack"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
],
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]
},
"description": "This project was bootstrapped with [Create React 
App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.4.4",
"file-loader": "^4.0.0",
"image-webpack-loader": "^5.0.0",
"ttf-loader": "^1.0.2",
"url-loader": "^2.0.0"
},
"keywords": [],
"author": "",
"license": "ISC"
}

// файл webpack.config.js

const path = require('path')

   module.exports = {
   entry: './src/index.js',
   output: {
   path: path.join(__dirname, 'public', "js"),
   filename: 'bundle.js'
   },
   mode: 'development',
   module: {
    rules: [
      {
        loader: 'babel-loader',
        test: /\.jsx?$/,
        exclude: /node_modules/
      },
      {
        loader: 'style-loader!css-loader',
        test: /\.css$/
      },
      {
        test: /\.(svg|png|jpg|gif)$/,
                use: {
                 loader: "file-loader",
                 options: {
                     name:"[name].[ext]",
                     outputPath: "images"
                 } 
               }
        // test: /\.(gif|png|jpe?g|svg)$/i,
        //   use: [
        //     'file-loader?name=[name]. 
        // [ext]&outputPath=js/js/assets/',
        //     {
        //       loader: 'image-webpack-loader',
        //       options: {
        //         bypassOnDebug: true, // webpack@1.x
        //         disable: true, // webpack@2.x and newer
        //       },
        //     }]
          },
          {
            test: /\.ttf$/,
            use: [
              {
                loader: 'ttf-loader',
                options: {
                  name: './font/[hash].[ext]',
                  outputPath: "font"
                },
              },
            ]
        }
    ]
    },
    resolve: {
    extensions: ['.js', '.jsx']
    },
    devtool: 'source-map'
    }

Answer 1

Я решил эту проблему путем перенастройки моего веб-пакета:

Мой предыдущий путь вывода в Webpack был

module.exports = {
   entry: './src/index.js',
   output: {
   path: path.join(__dirname, 'public', "js"),
   filename: 'bundle.js'.
}

Это создало каталог папки js, вложенный в общую папку. Я подозреваю, что это плохо сочеталось с машиной Heroku.

РЕШЕНИЕ:

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public'),
  }.

Я удалил лишний каталог js-папки и просто выводил все ресурсы прямо в общую папку. Вместо использования path.join (__dirname, «public»), я привел к использованию path.resolve (__dirname, «public»)

Answer 2

При импорте изображений в React мы обычно полагаемся на Webpack для копирования соответствующих файлов, а не на ссылки на общедоступный каталог, например

src
    components
        MyComponent
            index.jsx
            image.png

В моем файле index.jsx я бы просто импортировал изображение так:

import myImage from './image.png';

Наконец, и самое главное, вам необходимо обновить конфигурацию вашего Webpack, чтобы включить загрузчик для ваших изображений, если он еще не добавлен, например file-loader.

См. Этот вопрос / ответ для получения дополнительной информации о процессе: Как импортировать изображение (.svg, .png) в компонент React