Heroku 上的图像损坏 - NodeJS React 应用程序答案

【问题标题】：Broken images on Heroku - NodeJS React appHeroku 上的图像损坏 - NodeJS React 应用程序
【发布时间】：2019-02-22 02:59:06
【问题描述】：

我有一个使用 NodeJS (Express)、React 和 Webpack 构建的全栈应用程序。当我在本地运行服务器并提供公用文件夹（Webpack 在其中生成资产）时，所有图像都可以正常工作。但是，当将相同的资产部署到 Heroku 并使用相同的脚本在 Heroku 上运行服务器时，图像会损坏。

对于本地和 Heroku 服务器，NODE_ENV 设置为生产。

问题不在于哈希、图像名称、浏览器缓存或图像扩展名（png 与 PNG）。带有 .png 扩展名的图像已下载但根本未加载，而 .jpg 已加载但它们看起来与所附屏幕截图一样。

本地：

知道发生了什么吗？

【问题讨论】：

如何加载图像？ src中的Base64字符串？
不，我这样加载文件：<img src="fb8f767c715da437334228697d56b666.png" class="src-common-components-Header-Header__logo2--1y4Kj" alt="logo">

标签： node.js reactjs heroku webpack

【解决方案1】：

问题在于，在执行git push 时，git 转换了行尾，导致图像数据损坏。为了避免这种情况，我更改了.gitattributes 的配置并添加了： *.png binary *.jpg binary *.jpeg binary *.gif binary *.ico binary *.mov binary *.mp4 binary *.mp3 binary *.flv binary *.fla binary *.swf binary *.gz binary *.zip binary *.7z binary *.ttf binary *.eot binary *.woff binary *.pyc binary *.pdf binary

现在可以使用了:)

【讨论】：