如何从 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 更改包功能本身，这样你的更改就不会持久。

如果您想添加此行为，您需要 add a PR to Gatsby's repository 为您的用例提供解决方案，因为您试图通过删除 <noscript> 标签来实现的目标不是预期的行为gatsby-image.

删除可能会使您的网站以默认成本覆盖更多人的功能也没有意义，这些行添加的字节数毫无意义。

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

How to remove `<noscript>` tag from gatsby-image wrapper?

reactjs

gatsby

gatsby-image