[英]Deployed React Portfolio on Heroku does not display images
我已经在 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'
}
将图像导入React时,我们通常依靠Webpack复制相应的文件,而不必引用公共目录,例如
src
components
MyComponent
index.jsx
image.png
在我的index.jsx
文件中,我只是像这样导入图像:
import myImage from './image.png';
最后,最重要的是,您需要更新Webpack配置,以便为图像添加加载器(如果尚未包含file-loader
,例如file-loader
。
有关该过程的更多详细信息,请参阅此问题/答案: 如何在React组件中导入图像(.svg,.png)
我通过重新配置我的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”)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.