在 Heroku 上部署的 React Portfolio 不显示图像

Question

I have deployed my portfolio on Heroku, https://tomdoan.herokuapp.com/

On the local machine the images display fine, so I assume for now the path set in Webpack is correct

Deployed on Heroku, it seems their production machine will not recognize the path.

I am new to React / Deployment

In the console, it seems heroku does not recognize the path I have set, I am thinking / assuming the production server might have changed the path

Would really appreciate some guidance, thank you

// 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 file

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

When importing images into React, we usually rely on Webpack to copy the appropriate files over, rather than having to reference a public directory, eg

src
    components
        MyComponent
            index.jsx
            image.png

In my index.jsx file, I'd simply import the image like so:

import myImage from './image.png';

Finally, and most importantly, you need to update your Webpack config to include a loader for your images if doesn't already include one, such as file-loader .

See this question/answer for more details on the process: How to import image (.svg, .png ) in a React Component

Answer 2

I solved this problem by reconfigure my webpack:

My previous output path in Webpack was

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

That created a js folder directory nested inside public folder. I suspect that did not gel well with Heroku production machine.

THE SOLUTION:

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

I deleted the extra js folder directory and just have all assets output directly inside of the public folder. Instead of using path.join(__dirname, "public"), I resulted to using path.resolve(__dirname, "public")