Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

gatsby-remark-images generates undefined href and hides the image #1888

Closed
3axap4eHko opened this issue Aug 23, 2017 · 1 comment · Fixed by #1908
Closed

gatsby-remark-images generates undefined href and hides the image #1888

3axap4eHko opened this issue Aug 23, 2017 · 1 comment · Fixed by #1908

Comments

@3axap4eHko
Copy link
Contributor

3axap4eHko commented Aug 23, 2017

in my markdown I have

<img src="./flight.jpg" alt="some text" title="some text" />

and this line transformed to the

<a class="gatsby-resp-image-link" href="undefined" style="display: block" target="_blank" rel="noopener">
  <span class="gatsby-resp-image-wrapper" style="position: relative; z-index: -1; display: block; ">
    <span class="gatsby-resp-image-background-image" style="padding-bottom: 56.34765625%;position: relative; width: 100%; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAa0dUiZgP//EABoQAAMAAwEAAAAAAAAAAAAAAAABAgMREjL/2gAIAQEAAQUC5OByL1kpzG3R/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Bh//EABYRAQEBAAAAAAAAAAAAAAAAAAAREv/aAAgBAgEBPwHSv//EABcQAAMBAAAAAAAAAAAAAAAAAAABERD/2gAIAQEABj8C2DhWz//EABkQAQEAAwEAAAAAAAAAAAAAAAEAESFBMf/aAAgBAQABPyE32wOsOfW0fE1PEsylv//aAAwDAQACAAMAAAAQtM//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPxCEf//EABURAQEAAAAAAAAAAAAAAAAAAAEA/9oACAECAQE/EBTP/8QAHBABAAIDAAMAAAAAAAAAAAAAAQARITFBUWFx/9oACAEBAAE/EGKMLFWqHKLqB2fcwHUweJexfBjZz6s//9k='); background-size: cover; display: block;">
      <img 
        class="gatsby-resp-image-image" 
        style="width: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"
        alt="some text"
        title="some text" 
        src="/static/425eb5cbc41012865561eb6c4e0a60bb-2b053.jpg"
        srcset="/static/425eb5cbc41012865561eb6c4e0a60bb-8a2b5.jpg 250w,
/static/425eb5cbc41012865561eb6c4e0a60bb-b0cf5.jpg 500w,
/static/425eb5cbc41012865561eb6c4e0a60bb-2b053.jpg 1000w,
/static/425eb5cbc41012865561eb6c4e0a60bb-41f0e.jpg 1024w" 
        sizes="(max-width: 1000px) 100vw, 1000px">
    </span>
  </span>
</a>

by this way I don't see my image (due to z-index: -1) and link to the original image is undefined

I think the issue is in the line
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-images/src/index.js#L68

const originalImg = responsiveSizesResult.originalImage

it should be

const originalImg = responsiveSizesResult.originalImg
@fk
Copy link
Contributor

fk commented Aug 24, 2017

Thank you @3axap4eHko!

fk pushed a commit to fk/gatsby that referenced this issue Aug 28, 2017
KyleAMathews pushed a commit that referenced this issue Aug 28, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants