Question

这让我发疯了。我有一个简单的nodejs / express服务器，它从公共目录中提供index.html。因此，我设置了中间件app.use（express.static（'public'））来提供CSS JS文件和来自'public'目录的图像。但是，我无法使Images在“生产”中工作，因此将其部署到Heroku之后。在DevTools中获取404状态，例如文件夹“图像”不存在。在我的本地计算机上，一切正常，因此我认为这是一个路径问题，但无法破解。

我尝试切换到绝对路径（如https://myappname.herokuapp.com/images/filename.svg或https://myappname.herokuapp.com/public/images/filename.svg），并与express.static中间件（如app.use（express.static（path.join（__ dirname，'public） '））），但似乎没有任何效果。我想念什么吗？

文件结构如下：

>index.js
|public
  >index.html
  |css
    >style.css
  |scripts
    >script.js
  |images
    >collection-SVG-sprite.svg
    >test.jpg

（文件夹和文件更多，但与问题无关）

我的index.js看起来像：

const express = require('express')
const puppeteer = require('puppeteer')
const hbs = require('handlebars')
const fs = require('fs-extra')
const path = require('path')
const bodyParser = require('body-parser')
const multer = require('multer')

const app = express()

app.use(express.static('public'))
app.use(bodyParser.json())

//more code here

const PORT = process.env.PORT || 5000

app.listen(PORT, ()=>{
    console.log(`App is listening on port ${PORT}`)
})

我的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Free Resume Generator</title>
    <link href="https://fonts.googleapis.com/css?family=Montez|Poiret+One|Iceberg|Rajdhani:300,400,500,600,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
    <link rel="stylesheet" href="/css/style.css">

</head>
<body>

    <nav class='mainNav'>
        <div class='mainNav__left'>
            <i onClick="goHome()" class="fas fa-home mainNav__left--i"></i>
            <div class='mainNav__left--section'>
                <p lang="en">Sections:</p>
                <p lang="pl">Sekcje:</p>
            </div>
        </div>
        <div class="mainNav__language">
            <div onClick="switchLanguage('en')" name='language__photo' class="mainNav__language--icon" >
                <svg>
                    <use xlink:href="/images/collection-SVG-sprite.svg#uk"></use>
                </svg>
            </div>
            <div onClick="switchLanguage('pl')" name='language__photo' class="mainNav__language--icon">
                <svg>
                    <use xlink:href="/images/collection-SVG-sprite.svg#poland"></use>
                </svg>
            </div>
        </div>
    </nav>
<img src="/images/test.jpg" style="width:10rem" alt="test image" />
...
<script src='/scripts/script.js'></script>
</body>
</html>

我无法从子画面或测试图像中获取图标。相对路径与'script'标签和'link'相同，并且它们加载得很好。不知道为什么图片不对。我有其他具有类似架构的网站，没有问题。但是在这一本书中，我使用了其他一些依赖项（puppeteer，hbs，fs-extra），也许它们会引起问题？

我在这里找到了一些类似的线程，但是没有一个为我提供正确的答案。

Answer 1

我感到as愧，但也许有人利用我的错误。文件夹/文件结构以及快速中间件都可以。问题是我如何对Heroku进行更改。安装： git添加> git commit -m'some message'> git push heroku master

我一直使用快捷方式： git commit -a -m'some message'> git push heroku master

那样，我就不会部署稍后在初始部署之后创建/添加到项目中的图像文件夹。我忘记了-a标志：

告诉命令以自动暂存已修改的文件并删除，但是您尚未告知Git的新文件不会被删除受影响。

图片文件夹未包含在“制作”中。提供静态CSS和JS文件，但不提供图片

1 个答案: