我在前端有一個站點，并決定將后端添加到其中（以獲取資料并進行一般修改）。后端向前端提供資料，但影像有問題，我不知道為什么。data.js 提供了 _id、URL、title、flavor、category、region、variety 和 description，但沒有圖片（加載資源失敗：服務器回應狀態為 404（未找到））。
不幸的是，我試圖尋找答案，但沒有找到適合我的答案。我還將自己的 webpack5 配置用于前端。
這是 repo 的鏈接：link to the repo。
下面我向您介紹所有重要資訊：
節點 v16.13.2
我的檔案結構：
mainFolder
- backend
-- data.js
-- server.js
- frontend
-- config
--- webpack.common.js
--- webpack.config.js
--- webpack.dev.js
--- webpack.prod.js
-- public
--- folder
---- pic.jpg
-- src
--- (...)
---- frontend.js
-- (...)
-- package.json (in frontend folder)
- package.json (in root folder)
package.json（在根檔案夾中）：
{
"name": ...,
"type": "module",
"version": ...,
"description": ...,
"author": ...,
"license": ...,
"main": ...,
"scripts": {
"start": "nodemon --watch backend --exec node --experimental-modules backend/server.js"
},
"dependencies": {
"express": "^4.17.2"
},
"devDependencies": {
"nodemon": "^2.0.15"
}
}
package.json（在前端檔案夾中）：
{
"name": ...,
"proxy": "http://127.0.0.1:8000",
"version": ...,
"description": ...,
"author": ...,
"license": ...,
"main": ...,
"scripts": {
"start": "webpack serve --config config/webpack.config.js --env env=dev",
"build": "webpack --config config/webpack.config.js --env env=prod"
},
"devDependencies": {...},
"dependencies": {...}
}
server.js：
import express from 'express'
import data from './data.js'
const app = express()
const port = process.env.PORT || 8000
app.get('/api/products', (req, res) => {
res.send(data.products)
})
app.get('/', (req, res) => {
res.send('server is ready')
})
app.listen(port, () => {
console.log(`serve at http://localhost:${port}}`)
})
資料.js：
const data = {
products: [
{
_id: 1,
url: 'url',
title: 'title',
flavor: 'flavor',
category: 'category',
image: '/images/folder/pic.jpg',
region: 'region',
variety: 'variety',
description:'description',
},
{...},
],
}
export default data
前端.js：
import { Link } from 'react-router-dom'
import { useEffect, useState } from 'react'
import axios from 'axios'
const Frontend = ({ match }) => {
const [products, setProducts] = useState([])
useEffect(() => {
const fetchData = async () => {
const { data } = await axios.get('/api/products')
setProducts(data)
}
fetchData()
}, [])
const list = products.map((product) => (
<li key={product._id}>
<Link to={`${match.url}/${product.url}`}>
<img
src={product.image}
alt={product.url}
/>
<div>
<h2>{product.title}</h2>
<p>{product.flavor}</p>
<button>View more</button>
</div>
</Link>
</li>
))
return (
<div>
<ul>{list}</ul>
</div>
)
}
export default Frontend
webpack.common.js：
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, '..', './src/index.js'),
output: {
path: path.resolve(__dirname, '..', './dist'),
filename: '[name].[contenthash:6].js',
clean: true,
publicPath: '/',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(?:ico|gif|png|jpg|jpeg|mp4)$/i,
type: 'asset/resource',
},
{
test: /\.(woff(2)?|eot|ttf|otf|svg|pdf)$/,
type: 'asset/inline',
},
],
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
plugins: [
new HtmlWebpackPlugin({
title: '...',
template: path.resolve(__dirname, '..', './src/template/template.html'),
favicon: path.resolve(__dirname, '..', './public/favicon.ico'),
filename: 'index.html',
}),
],
}
webpack.config.js：
const { merge } = require('webpack-merge')
const commonConfig = require('./webpack.common.js')
module.exports = ({ env }) => {
const envConfig = require(`./webpack.${env}.js`)
return merge(commonConfig, envConfig)
}
webpack.dev.js：
const path = require('path')
const Dotenv = require('dotenv-webpack')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
module.exports = {
mode: 'development',
devtool: 'eval-source-map',
devServer: {
proxy: {
'/api': 'http://localhost:8000',
},
historyApiFallback: true,
contentBase: path.resolve(__dirname, '..', './dist'),
open: true,
hot: true,
compress: true,
port: 8080,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
plugins: [require.resolve('react-refresh/babel')],
},
},
],
},
{
test: /\.(s[ac]|c)ss$/i,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
],
},
plugins: [
new Dotenv({
path: path.resolve(__dirname, '..', './.env.development'),
}),
new ReactRefreshWebpackPlugin(),
],
}
webpack.prod.js：
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const Dotenv = require('dotenv-webpack')
module.exports = {
mode: 'production',
devtool: 'source-map',
output: {
path: path.resolve(__dirname, '..', './dist'),
filename: 'js/[name].[contenthash:6].js',
},
module: {
rules: [
{
test: /\.(s[ac]|c)ss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'styles/[name].[contenthash:6].css',
chunkFilename: '[id].css',
}),
new Dotenv({
path: path.resolve(__dirname, '..', './.env.production'),
}),
],
optimization: {
minimize: true,
minimizer: [new CssMinimizerPlugin(), '...'],
runtimeChunk: {
name: 'runtime',
},
},
}
uj5u.com熱心網友回復：
我看到您沒有在您的快速應用程式中使用靜態檔案。您應該將靜態檔案添加到您的快速應用程式并在您的后端服務器上提供圖片。
基本上你可以看看這個檔案。
此外，如果您喜歡視頻，您可以觀看此視頻。
首先，你的后端檔案應該是這樣的；
backend
-server.js
-data.js
-public
--images
---coffee
----pic.jpg
這是 server.js 檔案：
import express from 'express'
import data from './data.js'
import path from 'path'
import { fileURLToPath } from 'url';
import { dirname } from 'path';
const app = express()
const port = process.env.PORT || 8000
app.get('/api/products', (req, res) => {
res.send(data.products)
})
app.get('/', (req, res) => {
res.send('server is ready')
})
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
app.use(express.static(path.join(__dirname,'public')))
app.use('/static',express.static('public'))
app.listen(port, () => {
console.log(`serve at http://localhost:${port}}`)
})
// go to 'http://localhost:8000/images/coffee/pic.jpg' it will work轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/416551.html
標籤：