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

将图像导入React时，我们通常依靠Webpack来复制适当的文件，而不必引用公共目录，例如

src
    components
        MyComponent
            index.jsx
            image.png

在我的index.jsx文件中，就像这样简单地导入图像：

import myImage from './image.png';

最后，最重要的是，您需要更新Webpack配置，以包含用于图像的加载器（如果尚未包含图像加载器，例如file-loader。

）

有关此过程的更多详细信息，请参见此问题/答案：How to import image (.svg, .png ) in a React Component

Answer 2

我通过重新配置Webpack解决了这个问题：

我在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”）

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

2 个答案: