为啥我的一张图片没有显示在 Gatsby 页面上？

Posted 2023-03-08

【中文标题】为啥我的一张图片没有显示在 Gatsby 页面上？

【英文标题】：Why does one of my images not show on Gatsby page?为什么我的一张图片没有显示在 Gatsby 页面上？

【发布时间】：2021-06-01 21:55:41

【问题描述】：

我对这个有点迷茫，所以就这样吧：我用 Gatsby.js 创建了一个站点，然后将它部署到我的 Web 服务器（在 Ubuntu 20.04 上运行 nginx）。对于查询和显示图像，我使用 Gatsby Image 并且一切似乎都工作正常，只有一个图像没有显示 - 尽管有文件实际存在。

要了解我在说什么，请随时访问http://www.junge-philharmonie-berlin.de/ 并查看“柏林军歌爱乐乐团”左侧的徽标丢失/未显示。在源代码中，DOM 元素是存在的，并且 src-path 指向一个现有的图像；这是我不明白的。

非常感谢任何提示或帮助。

提前致谢， 马库斯

【问题讨论】：

请阅读Something on my web site doesn't work. Can I just paste a link to it?。当外部资源消失或固定时，依赖于外部资源来理解的问题变得毫无用处。创建一个minimal reproducible example 并将其放入问题本身。 *** 确实支持inline live demos

【参考方案1】：

您的图像存在，您可以抓取它并在检查工具中检查它。您的问题取决于您的 CSS 规则。你有：

.titleIcon 
    width: 37%;
    opacity: 1%;

如果您将不透明度更改为100%（或1）：

【讨论】：

哦，非常感谢。我只是想知道为什么这只发生在 Prod 而没有其他地方。似乎是一些 js 脚本改变了该值，因为在我的 css 中它实际上设置为 80%。非常感谢！！