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

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

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 的支持。

解决方法

您无法删除该 <noscript> 行为，因为默认情况下它是固有的 gatsby-image 并且它没有添加任何类型的自定义来避免它。

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

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

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