reactjs - 如何删除`

Question

The resulting static html code from gatsby-image is something like this:

<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>

I couldn't find an option to <noscript> in the docs.

This is the image component:

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

Pretty much the default that comes with this starter template: gatsby-starter-typescript-jest.

This is the gatsby-config.js, I've removed some unecessary comments and properties:

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`,
  ],
}

The reason is that I just don't want to add support for disabled javascript.

标签： reactjsgatsbygatsby-image

Answer 1

You can't remove that <noscript> behavior since it's inherent by default gatsby-image and it doesn't add any kind of customization to avoid it.

As it has been said by @Mike 'Pomxa' Mamermans it's strongly suggested to leave it. It's not a matter of "I just don't want to add support for disabled javascript", it's a matter of default fallback for old browsers or browsers that have the JavaScript disabled, and trying to change this behavior will thrive you in weird caveats since you will need to change the package functionality itself from node_modules so your change won't be persistent.

If you want to add this behavior you'll need to add a PR to Gatsby's repository providing a solution for your use-case since what you are trying to achieve by removing the <noscript> tag it's not intended behavior for gatsby-image.

It also doesn't make sense to remove functionality that potentially will make your site reach more people at default cost, in a meaningless amount of bytes that those lines add.