Images(PNG,JPG) won't show on Heroku App after deploying Node JS

Question

So I have built my app using Node JS. Everything worked out perfectly via testing locally using localhost:3000.

When I was testing app locally, I've used path such as

<p>
    <img src="http://localhost:3000/images/logo/sample.jpg" />
</p>

to make my browser get image file and render it.

Of course I've set it up /public as my static folder inside app.js

So I've realized after deploying to Heroku that using http://localhost:3000/images/logo/sample.jpg gets me 404 error code but I've resolved by removing localhost:3000 and just used /images/logo/sample.jpg

Using Chrome's Developer tool against my Heroku app (after deploying), I was able to see that images were loaded perfectly but ended up not displaying. And one strange part that I've noticed was the type of document. Both .png and .jpg files inside Heroku was read as html/text type rather than image type.

Is there a method which I can tell Heroku that my .png or .jpg files aren't html/text type?

I do not want to use S3 or paid cloud services... Just want to use Heroku's free plan.

Thank you all.

Answer 1

如果您碰巧使用Windows开发了应用程序，则图像扩展案例并不敏感，但是当您将应用程序部署到Heroku时，Heroku基于Linux，因此会关注您正在使用的案例。例如，您可能有一个图像 background.JPG 但在您的应用程序中使用 background.jpg ，遗憾的是它无法在heroku部署中使用。