mongodb 解决404错误的字体和图像文件在js.js应用程序

2admgd59  于 2023-10-16  发布在  Go
关注(0)|答案(1)|浏览(91)

我在尝试加载字体和图像文件时遇到404错误。我已经尝试了各种方法,包括在HTML中使用标记,但有些资产仍然不能正确提供。我需要帮助来识别和纠正问题。

问题:

我正在使用java.js构建一个Web应用程序,我有一个/public目录,其中存储了我的静态资产,包括字体和产品图像,但有一个我没有添加的前缀,默认情况下添加了这个/product-details/我不知道这是从哪里来的,只有当我使用/:id时才会发生这种情况。
当我访问应用程序时,一些资产加载没有任何问题,但其他资产在浏览器控制台中返回404错误。

我检查的内容:

我已经验证了在HTML和CSS文件中正确指定了字体和图像文件的路径。
我已经确认字体和图像文件存在于/public目录中,文件名和扩展名正确。
我已经正确地配置了Express来使用express.static中间件提供静态文件:

app.use(express.static(path.join(__dirname, "public")));

错误消息示例:
以下是我在浏览器控制台中遇到的一些示例错误消息:
GET http://localhost:3000/product-details/fonts/ElegantIcons. woff net::ERR_ABORTED 404(Not Found)font-awesome.min.css:1 GET http://localhost:3000/product-details/fonts/fontawesome-webfont. woff2?v=4.7.0 net::ERR_ABORTED 404(Not Found)
其他信息:
我尝试在HTML中添加一个标记,以确保正确解析相对路径,但问题仍然存在。
我的应用程序运行在http://localhost:3000上。

问题:

如何解决这些资源的404错误并确保Express.js正确提供所有字体和图像文件?我还需要检查或配置其他内容来解决此问题吗?
感谢您的帮助!

jdzmm42g

jdzmm42g1#

Hi @erblin,

很久以前,我就在使用J2EE. js,面临着同样的问题,并以与您发布的类似的方式解决了它。所以我不确定自那以后是否有任何变化,但我仍然想建议你尝试下面提到的方法。
根据js.js文档:
但是,为express.static函数提供的路径是相对于启动节点进程的目录的。如果你从另一个目录运行express应用程序,使用你想要服务的目录的绝对路径会更安全:

console.log('__dirname :', __dirname);
const path = require('path')
app.use('/static', express.static(path.join(__dirname, 'public')))

所以,在这里你需要检查并确认上面的代码是从你的静态资产文件夹的根位置执行的(例如。/assets)可用,否则可以使用相对路径。(请参考本文末尾给出的相对路径示例代码)。
文件夹结构可能是:(参考https://www.geeksforgeeks.org/express-js-express-static-function/

public/
 |- Css
 |- js
 |- fonts
node_modules/
views/
src/
server.js

还可以尝试使用console.log('__dirname :', __dirname);来检查它是从哪里为您的资产文件提供服务的。
据我所知,server.js服务器将尝试从服务器(server.js文件执行)启动的位置查找静态资产路径。

相对路径示例:

console.log('__dirname :', __dirname);
const path = require('path');
app.use(express.static(path.resolve(__dirname, '../')));

我希望这会有所帮助。
谢谢,吉格内什·拉瓦尔

相关问题