question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[gatsby-image] alt property is not shown

See original GitHub issue

Description

There is no observation problem. Just the SEO checker find out that the alt property is missing.

Steps to reproduce

gatsby new gatsby-site
cd gatsby-site
gatsby develop

Then go to the src\components\image.js and replace the line from return <Img fluid={data.placeholderImage.childImageSharp.fluid} /> with return <Img fluid={data.placeholderImage.childImageSharp.fluid} alt="test" />

Expected result

Open the test page on browser and inspect the astronaut. I would expect the image would have the alt="test" property and with the word test.

Actual result

Instead it shows alt="" on the outmost image div.

Environment

  System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 12.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.7.6
  Browsers:
    Edge: 44.19041.1.0
  npmPackages:
    gatsby: ^2.18.22 => 2.18.22
    gatsby-image: ^2.2.38 => 2.2.38
    gatsby-plugin-manifest: ^2.2.37 => 2.2.37
    gatsby-plugin-offline: ^3.0.31 => 3.0.31
    gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21
    gatsby-plugin-sharp: ^2.3.13 => 2.3.13
    gatsby-source-filesystem: ^2.1.46 => 2.1.46
    gatsby-transformer-sharp: ^2.3.12 => 2.3.12

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
winstonmacommented, Jan 17, 2020

Sorry I published after running gatsby develop. I ran gatsby build and updated the repo again. Thanks for your time.

After the build it seems it is okay. But I saw the problem in gatsby develop. Not sure if they have any relationship.

0reactions
winstonmacommented, Jan 17, 2020

Thanks for your time.

Read more comments on GitHub >

github_iconTop Results From Across the Web

gatsby-plugin-image | <StaticImage /> Does not display the ...
I am importing the image directly from the assets folder. Per the Gatsby Image Plugin documentation, src must be type string . You're...
Read more >
Gatsby Image plugin
The Gatsby Image plugin includes two components to display responsive images on your site. One is used for static and the other for...
Read more >
Using static image in Gatsby-plugin-image - Media Jams
The Gatsby Image plugin takes care of the difficult elements of ... Style of the temporary image shown while the full image loads....
Read more >
Gatsby Starter Blog: How to Add Header Images to Posts with ...
If the image or imageAlt properties are not set in a post's frontmatter, it won't cause any issues. Those properties will just be...
Read more >
A comprehensive guide to images in Gatsby - orangejellyfish
If any of your posts do not have a hero image you need to omit the relevant property from the frontmatter. If any...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found