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 not showing certain images in `build` #2440

Closed
dougajmcdonald opened this Issue Oct 13, 2017 · 20 comments

Comments

Projects
None yet
10 participants
@dougajmcdonald
Copy link
Contributor

dougajmcdonald commented Oct 13, 2017

I've recently added gatsby-remark-images to my site and have two markdown posts with images. Both images are referenced in their respective .md files like so ![alt text](imagename.png) In both cases I have the following file structure

-post-folder
-- index.md
-- imagename.png

In gatsby develop, both images show correctly in the posts and when I run gatsby build locally, I can see both images output to the public folder in the many sizes gatsby-remark-images generates.

However, when I run my build on wercker only one of the posts generates the HTML to render the image.

I'm just about to check the output files in the production to see if the production build actually produced the image files for the missing post, but wondered if there is any way I can begin to debug this apart from checking the output and fiddling with versions etc.

EDIT:
Having checked my production server, only the images for one of the two posts have even been generated so I'm now wondered why? Is there anything in gatsby-remark-images which would stop it trying to generate images under certain conditions? (Do the image have to be any specific size to start with? is there any dependency between the image size and the config options in the plugin etc?)
I couldn't find too much in the docs in this area,

If it's any help, my config is as simple as I could make it.

      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: 'language-',
            }
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
              linkImagesToOriginal: false,
            }
          }
        ] 
      }
    }
@markanthonyuy

This comment has been minimized.

Copy link

markanthonyuy commented Oct 14, 2017

I have the same issue, when I'm in gatsby develop it displayed the images correctly but on build the images can't be found.

@markanthonyuy

This comment has been minimized.

Copy link

markanthonyuy commented Oct 14, 2017

Upon investigation, I think my problem occurs because of the prefix path /blog, but the request to static files isn't /static/4233df1e1e504c24912f2c55e21158ff-ca545.jpg it has to be /blog/static/4233df1e1e504c24912f2c55e21158ff-ca545.jpg

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

KyleAMathews commented Oct 16, 2017

@markanthonyuy yeah we seemed to have lost the code adding pathPrefix to urls at some point

@zamhaq

This comment has been minimized.

Copy link

zamhaq commented Oct 22, 2017

@KyleAMathews @dougajmcdonald @markanthonyuy did you find any workaround ?

@HyperSprite

This comment has been minimized.

Copy link

HyperSprite commented Nov 11, 2017

I was having this same issue.
I had pathPrefix: '/blog', in the root of my gatsby-config export but photos were linked to /static and not /blog/static. I added pathPrefix: '/blog' to the plugins like so:

{
  resolve: 'gatsby-transformer-remark',
  options: {
    plugins: [
      {
        resolve: 'gatsby-remark-images',
        options: {
          maxWidth: 690,
          pathPrefix: '/blog',
        }, // etc. etc.

and it seems to be working fine in production but not in dev.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

KyleAMathews commented Nov 13, 2017

@HyperSprite gatsby-remark-images doesn't have a pathPrefix option so that won't do anything.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

KyleAMathews commented Nov 13, 2017

You perhaps just need to build your site with --path-prefix? https://www.gatsbyjs.org/docs/path-prefix/#production-build

@HyperSprite

This comment has been minimized.

Copy link

HyperSprite commented Nov 13, 2017

Sorry about any confusion I may have added to this thread.
It looks like I may have had some bad cache. I "rm -rf .cache/*" and tried both gatsby develop and gatsby build --prefix-paths and things seem to be working correctly.

@zamhaq

This comment has been minimized.

Copy link

zamhaq commented Nov 15, 2017

@HyperSprite I am still having the same issue in production. It seems my images are still trying to link to /static instead of /blog/static. Can you tell me what should I do to set?

@HyperSprite

This comment has been minimized.

Copy link

HyperSprite commented Nov 15, 2017

@zamhaq I'm no expert but what I've done to get mine to work reliably is clear the cache and follow the rest of the docs. There may be better solutions out there but this is working for me.

In my gatsby-config.js (like the docs say)

module.exports = {
  pathPrefix: '/blog',
// plus all the rest of the config

Then I have two custom npm run scripts in my package.json that clears the cache before running the that mode.

Note: t build uses --prefix-path (also like the docs say)

  scripts: {
    "dev": "rm -rf .cache/* && gatsby develop",
    "deploy-pl": "rm -rf .cache/* && gatsby build --prefix-paths
  }

Then run npm run dev and npm run deploy-pl

Note: I stop dev before running build.

@zamhaq

This comment has been minimized.

Copy link

zamhaq commented Nov 15, 2017

@HyperSprite Thanks. So we need to clear the cache each time? I'll try this out.

@shsp

This comment has been minimized.

Copy link

shsp commented Nov 15, 2017

@HyperSprite @KyleAMathews When I open index.html from the public folder in the browser I see my navigation element but not the images. However I can see the img tag in the dev tool and changing its src from <img src="/static/7da0684ba1b8e5e39c548de721a28c6f-fb0df.jpg" ...> to <img src="./static/7da0684ba1b8e5e39c548de721a28c6f-fb0df.jpg" ...> makes the image visible again.

Everything works okay without the above issues when I load the site to localhost via gatsby serve Do you have any suggestions?

@seryl

This comment has been minimized.

Copy link
Contributor

seryl commented Dec 25, 2017

I just had the same issue with all my svg's; I'll help look into this next week.

Looks like it might be that png's are fine and this issue's only appearing with gifs and svg's since they aren't going through the same pipeline.

They get copied onto the target but somewhere along the lines the pathPrefix is missing.

I'm guessing it starts somewhere around here: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-images/src/index.js#L138-L141

@seryl

This comment has been minimized.

Copy link
Contributor

seryl commented Dec 25, 2017

It looks like any data that gets cached needs to be destroyed when going between prefixed and non-prefixed builds. I only see this when switching between the different build types.

Maybe we could just set a file flag in cache?

If it says development, and you run development, no issue. If it says production and file flag says development, wipe public, wipe cache, start fresh.

Could do the same for dev, prod, prod + prefix.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

KyleAMathews commented Jan 10, 2018

Yeah — the remark caching doesn't account for prefixed & non-prefixed builds. Would love a PR adding if pathPrefixing is enabled to the cache keys!

@Aaronm14

This comment has been minimized.

Copy link

Aaronm14 commented Jul 2, 2018

Could this issue be related to what I am currently seeing, which is when I have a .gif and .png image in a markdown file, the gif renders, but the png never even ha the HTML for it rendered?

@alisonjoseph

This comment has been minimized.

Copy link

alisonjoseph commented Aug 7, 2018

@Aaronm14 Did you ever figure this out? I'm having the opposite issue. pngs are working but gifs are not.

@Aaronm14

This comment has been minimized.

Copy link

Aaronm14 commented Aug 7, 2018

@alisonjoseph - Wish I had a better answer for you here because this was driving me crazy. My buddy was saying it was working for him and I just let him upload the rest of the content, never quite figured out what it was :(. I think it was just one of those weird things, nothing I or he did specifically to make it work I don't think. Maybe it was like a minor package version difference we had from running npm install at various points

@kakadiadarpan

This comment has been minimized.

Copy link
Contributor

kakadiadarpan commented Sep 27, 2018

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

@kakadiadarpan

This comment has been minimized.

Copy link
Contributor

kakadiadarpan commented Oct 10, 2018

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment