如何从gatsby-image包装器中移除`<noscript>`标签？

Question

从gatsby-image得到的静态html代码如下所示：

<div class=" gatsby-image-wrapper" style="position: relative; overflow: hidden;">
    <!-- Placeholder here (removed for abreviation)... -->
    <picture>
        <!-- Image tag and `sources` here... -->
    </picture>

    <!-- ⚠ This is what I want to remove ⚠ -->
    <noscript>
        <picture>
            <!-- Image tag and `sources` here... -->
        </picture>
    </noscript>
    <!-- ⚠ This is what I want to remove ⚠ -->

</div>

我在docs中找不到<noscript>的选项。

这是图像组件：

import * as React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
const MyPhoto = () => (
  <StaticQuery
    query={graphql`
      query {
        placeholderImage: file(relativePath: { eq: "image.png" }) {
          childImageSharp {
            fluid(maxWidth: 160) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    `}
    render={data => <Img  loading="eager" fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
)
export default MyPhoto

这个初学者模板附带的默认设置是：gatsby-starter-typescript-jest。

这是gatsby-config.js，我删除了一些不必要的注释和属性：

module.exports = {
  plugins: [
    `gatsby-plugin-preact`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {...myManifestOptions},
    },
    `gatsby-plugin-typescript`,
  ],
}

原因是我不想添加对禁用的javascript的支持。

Answer 1

您不能删除该<noscript>行为，因为它在默认情况下是固有的gatsby-image，并且它不会添加任何类型的定制来避免它。

正如@Mike 'Pomxa' Mamermans所说的，强烈建议离开它。这不是“我只是不想添加对禁用的JavaScript的支持”的问题，而是对旧浏览器或禁用了JavaScript的浏览器的默认回退，尝试改变这种行为会让你在奇怪的警告中茁壮成长，因为你需要从node_modules中改变包功能本身，这样你的更改就不会持久。

如果您想要添加此行为，您将需要为您的用例提供一个解决方案，因为您试图通过删除<noscript>标记来实现此行为，而这不是gatsby-image的预期行为。

删除那些可能会使您的站点以默认成本覆盖更多人的功能也是没有意义的，因为这些代码行添加了无意义的字节数。