盖茨比静态图片0X0答案

【问题标题】：gatsby static image 0X0盖茨比静态图片0X0
【发布时间】：2022-01-25 22:01:33
【问题描述】：

我正在使用新的 gatsby 图片插件和StaticImage。我在网站上有几张图片，除了一张只有黑色背景的图片之外，一切正常

（黑色的来源，将bg颜色属性更改为red例如将视图更改为红色）

<picture> 标签有 0X0 个像素

另一个奇怪的事情是自动创建的div 容器的最大宽度为 47 像素，尽管图像比这更大（在所有其他情况下，最大宽度实际上对应于图像尺寸）

相关代码

// js
 <div className="advertising">
   <StaticImage
              className="advertising-img"
              src="../images/advertising.png"
              alt="advertising"
   />

//scss
  .advertising {
      position: relative;
      margin: 123px 162px 150px 536px;
      .advertising-img {
        width: 260px;
        height: 230px;
        position: absolute;
        left: -460px;
        top: -15px;
      }

页面监视（用于了解 CSS 并显示另一张正常工作的图片..）

任何帮助将不胜感激，在此先感谢！ :)

编辑

现场直播 - https://catsh-landing-page.netlify.app/

【问题讨论】：

你能提供一个sanbox或一个live site吗？
已将实时站点添加到问题中

标签： image sass gatsby gatsby-image gatsby-plugin

【解决方案1】：

浏览器阻止了广告图片的请求，打开开发工具可以看到。

另外，在我的手机上运行的事实（截图如下）：

让我认为图像被浏览器本身或某些扩展程序（AdBlock 等）阻止，因为默认情况下避免广告商或宣传的名称。尝试更改图像名称或尝试禁用扩展。

【讨论】：

确实 AdBlock 扩展是原因。谢谢，永远不会想到它！