Gatsby + Netlify image rendering issues

Support
,
1

Some images are not rendering in Netlify production site, even though it works fine locally or in other apps, like Vercel.

sitename: codeforaustralia

I’m getting warnings for the following:
warning [gatsby-plugin-image] Missing image prop
warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null

4:04:11 AM: Build ready to start
4:04:13 AM: build-image version: a6bb34428a07e7de82f4df5dfe1843fbde91f670 (focal)
4:04:13 AM: build-image tag: v4.5.1
4:04:13 AM: buildbot version: 047dc2001d6cf9f76ba77ae34521e2065ab5c2bd
4:04:13 AM: Fetching cached dependencies
4:04:14 AM: Starting to download cache of 495.7MB
4:04:18 AM: Finished downloading cache in 4.423359012s
4:04:18 AM: Starting to extract cache
4:04:34 AM: Finished extracting cache in 16.258608233s
4:04:34 AM: Finished fetching cache in 20.818194639s
4:04:34 AM: Starting to prepare the repo for build
4:04:35 AM: Preparing Git Reference refs/heads/main
4:04:35 AM: Parsing package.json dependencies
4:04:36 AM: Starting build script
4:04:36 AM: Installing dependencies
4:04:36 AM: Python version set to 2.7
4:04:37 AM: Started restoring cached node version
4:04:39 AM: Finished restoring cached node version
4:04:39 AM: Attempting node version ‘v14.18.1’ from .nvmrc
4:04:39 AM: v14.18.1 is already installed.
4:04:40 AM: Now using node v14.18.1 (npm v6.14.15)
4:04:40 AM: Started restoring cached build plugins
4:04:40 AM: Finished restoring cached build plugins
4:04:40 AM: Attempting ruby version 2.7.2, read from environment
4:04:41 AM: Using ruby version 2.7.2
4:04:42 AM: Using PHP version 8.0
4:04:42 AM: Started restoring cached yarn cache
4:04:50 AM: Finished restoring cached yarn cache
4:04:50 AM: No yarn workspaces detected
4:04:50 AM: Started restoring cached node modules
4:04:50 AM: Finished restoring cached node modules
4:04:51 AM: Installing NPM modules using Yarn version 1.22.10
4:04:51 AM: yarn install v1.22.10
4:04:51 AM: [1/4] Resolving packages…
4:04:52 AM: success Already up-to-date.
4:04:52 AM: Done in 0.89s.
4:04:52 AM: NPM modules installed using Yarn
4:04:52 AM: Started restoring cached go cache
4:04:52 AM: Finished restoring cached go cache
4:04:52 AM: go version go1.16.5 linux/amd64
4:04:52 AM: go version go1.16.5 linux/amd64
4:04:52 AM: Installing missing commands
4:04:52 AM: Verify run directory
4:04:54 AM: ​
4:04:54 AM: ────────────────────────────────────────────────────────────────
4:04:54 AM: Netlify Build
4:04:54 AM: ────────────────────────────────────────────────────────────────
4:04:54 AM: ​
4:04:54 AM: ❯ Version
4:04:54 AM: @netlify/build 20.1.0
4:04:54 AM: ​
4:04:54 AM: ❯ Flags
4:04:54 AM: baseRelDir: true
4:04:54 AM: buildId: 61afa21b6546cc00085b0132
4:04:54 AM: deployId: 61afa21b6546cc00085b0134
4:04:54 AM: ​
4:04:54 AM: ❯ Current directory
4:04:54 AM: /opt/build/repo
4:04:54 AM: ​
4:04:54 AM: ❯ Config file
4:04:54 AM: /opt/build/repo/netlify.toml
4:04:54 AM: ​
4:04:54 AM: ❯ Context
4:04:54 AM: production
4:04:54 AM: ​
4:04:54 AM: ❯ Loading plugins
4:04:54 AM: - @netlify/plugin-gatsby@1.0.3 from Netlify app
4:04:54 AM: ​
4:04:54 AM: ────────────────────────────────────────────────────────────────
4:04:54 AM: 1. @netlify/plugin-gatsby (onPreBuild event)
4:04:54 AM: ────────────────────────────────────────────────────────────────
4:04:54 AM: ​
4:04:56 AM: Found a Gatsby cache. We’re about to go FAST. :zap:
4:04:56 AM: ​
4:04:56 AM: (@netlify/plugin-gatsby onPreBuild completed in 1.9s)
4:04:56 AM: ​
4:04:56 AM: ────────────────────────────────────────────────────────────────
4:04:56 AM: 2. build.command from netlify.toml
4:04:56 AM: ────────────────────────────────────────────────────────────────
4:04:56 AM: ​
4:04:56 AM: $ yarn build
4:04:57 AM: yarn run v1.22.10
4:04:57 AM: $ gatsby build
4:04:59 AM: warning Plugin gatsby-plugin-netlify is not compatible with your gatsby version 4.3.0 - It requires gatsby@^3.0.0
4:05:00 AM: warning Plugin gatsby-plugin-netlify is not compatible with your gatsby version 4.3.0 - It requires gatsby@^3.0.0
4:05:00 AM: success open and validate gatsby-configs, load plugins - 0.815s
4:05:00 AM: success onPreInit - 0.006s
4:05:00 AM: success delete worker cache from previous builds - 0.003s
4:05:00 AM: info Clearing previous fragments.
4:05:00 AM: info Writing default fragments.
4:05:06 AM: info Found 1 additional fragments
4:05:06 AM: info Adding profileImages.graphql to additional fragments
4:05:06 AM: success initialize cache - 5.849s
4:05:06 AM: success copy gatsby files - 0.087s
4:05:06 AM: success Compiling Gatsby Functions - 0.317s
4:05:06 AM: success onPreBootstrap - 0.326s
4:05:09 AM: success createSchemaCustomization - 2.595s
4:05:09 AM: info Checking Craft config version.
4:05:11 AM: info Craft config version has not changed since last sourcing. Checking for content changes since “2021-12-07 17:15:31”.
4:05:13 AM: info No content changes found.
4:05:13 AM: success Checking for changed pages - 0.001s
4:05:13 AM: success source and transform nodes - 4.378s
4:05:13 AM: info Clearing previous fragments.
4:05:13 AM: info Writing default fragments.
4:05:13 AM: info Clearing previous fragments.
4:05:13 AM: info Writing default fragments.
4:05:14 AM: info Writing GraphQL type definitions to /opt/build/repo/.cache/schema.gql
4:05:14 AM: info Clearing previous fragments.
4:05:14 AM: info Writing default fragments.
4:05:43 AM: info Found 1 additional fragments
4:05:43 AM: info Adding profileImages.graphql to additional fragments
4:05:43 AM: info Found 1 additional fragments
4:05:43 AM: info Overwriting the profileImages.graphql fragment
4:05:43 AM: info Found 1 additional fragments
4:05:43 AM: info Overwriting the profileImages.graphql fragment
4:06:02 AM: success building schema - 48.454s
4:06:23 AM: warning Your GraphQL query in createPages took 21.02 seconds which is an unexpectedly long time. See Improving Build Performance Guide | Gatsby for tips on how to improve this.
4:06:23 AM: success createPages - 21.081s
4:06:23 AM: success createPagesStatefully - 0.114s
4:06:23 AM: info Total nodes: 210, SitePage nodes: 50 (use --verbose for breakdown)
4:06:23 AM: success Checking for changed pages - 0.001s
4:06:23 AM: success Cleaning up stale page-data - 0.004s
4:06:23 AM: success onPreExtractQueries - 0.000s
4:06:32 AM: success extract queries from components - 9.447s
4:06:32 AM: success write out redirect data - 0.061s
4:06:33 AM: success Build manifest and related icons - 0.373s
4:06:33 AM: success onPostBootstrap - 0.401s
4:06:33 AM: info bootstrap finished - 96.122s
4:06:33 AM: success write out requires - 0.008s
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘audienceCardsContentBlockType’ (reexported as ‘audienceCardsContentBlockType’) was not found in ‘./audienceCardsContentBlockType’ (possible exports: audienceCardsContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘buttonsContentBlockType’ (reexported as ‘buttonsContentBlockType’) was not found in ‘./buttonsBlockType’ (possible exports: buttonsContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘ctaContentBlockType’ (reexported as ‘ctaContentBlockType’) was not found in ‘./ctaContentBlockType’ (possible exports: ctaContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘embeddedCodeBlockType’ (reexported as ‘embeddedCodeBlockType’) was not found in ‘./embeddedCodeBlockType’ (possible exports: embeddedCodeBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘faqListContentBlockType’ (reexported as ‘faqListContentBlockType’) was not found in ‘./faqListContentBlockType’ (possible exports: faqListContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘featuredCardContentBlockType’ (reexported as ‘featuredCardContentBlockType’) was not found in ‘./featuredCardContentBlockType’ (possible exports: featuredCardContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘featuredCaseStudiesBlockType’ (reexported as ‘featuredCaseStudiesBlockType’) was not found in ‘./featuredCaseStudies’ (possible exports: featuredCaseStudiesBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘featuredEventsContentBlockType’ (reexported as ‘featuredEventsContentBlockType’) was not found in ‘./featuredEventsContentBlockType’ (possible exports: featuredEventsContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘featuredResourcesBlockType’ (reexported as ‘featuredResourcesBlockType’) was not found in ‘./featuredResourcesBlockType’ (possible exports: featuredResourcesBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘fullImageContentBlockType’ (reexported as ‘fullImageContentBlockType’) was not found in ‘./fullImageContentBlockType’ (possible exports: fullImageContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘iconBarContentBlockType’ (reexported as ‘iconBarContentBlockType’) was not found in ‘./iconBarContentBlockType’ (possible exports: iconBarContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘latestResourcesBlockType’ (reexported as ‘latestResourcesBlockType’) was not found in ‘./latestResources’ (possible exports: latestResourcesBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘profileListContentBlockType’ (reexported as ‘profileListContentBlockType’) was not found in ‘./profileListContentBlockType’ (possible exports: profileListContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘pullQuoteContentBlockType’ (reexported as ‘pullQuoteContentBlockType’) was not found in ‘./pullQuoteContentBlockType’ (possible exports: pullQuoteContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘richContentContentBlockType’ (reexported as ‘richContentContentBlockType’) was not found in ‘./richContentContentBlockType’ (possible exports: richContentContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘sectionHeaderContentBlockType’ (reexported as ‘sectionHeaderContentBlockType’) was not found in ‘./sectionHeaderContentBlockType’ (possible exports: sectionHeaderContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘sponsorListContentBlockType’ (reexported as ‘sponsorListContentBlockType’) was not found in ‘./sponsorListContentBlockType’ (possible exports: sponsorListContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘statsContentBlockType’ (reexported as ‘statsContentBlockType’) was not found in ‘./statsContentBlockType’ (possible exports: statsContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘testimonialListContentBlockType’ (reexported as ‘testimonialListContentBlockType’) was not found in ‘./testimonialListContentBlockType’ (possible exports: testimonialListContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘upcomingEventsContentBlockType’ (reexported as ‘upcomingEventsContentBlockType’) was not found in ‘./upcomingEventsContentBlockType’ (possible exports: upcomingEventsContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/blocks/index.js
4:06:40 AM: export ‘videoContentBlockType’ (reexported as ‘videoContentBlockType’) was not found in ‘./videoContentBlockType’ (possible exports: videoContentBlockTypeGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘audienceCardEntry’ (reexported as ‘audienceCardEntry’) was not found in ‘./audienceCardEntry’ (possible exports: audienceCardEntryGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘basicPageEntry’ (reexported as ‘basicPageEntry’) was not found in ‘./basicPageEntry’ (possible exports: basicPageEntryGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘caseStudiesDefaultEntry’ (reexported as ‘caseStudiesDefaultEntry’) was not found in ‘./caseStudiesDefaultEntry’ (possible exports: caseStudiesDefaultEntryGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘caseStudiesListingEntry’ (reexported as ‘caseStudiesListingEntry’) was not found in ‘./caseStudiesListingEntry’ (possible exports: caseStudiesListingEntryGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘defaultCTAEntry’ (reexported as ‘defaultCTAEntry’) was not found in ‘./defaultCTAEntry’ (possible exports: defaultCTAEntryGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘eventEntry’ (reexported as ‘eventEntry’) was not found in ‘./eventEntry’ (possible exports: eventEntryGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘faqEntry’ (reexported as ‘faqEntry’) was not found in ‘./faqEntry’ (possible exports: faqEntryGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘heroEntry’ (reexported as ‘heroEntry’) was not found in ‘./heroEntry’ (possible exports: heroEntryGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘homeEntry’ (reexported as ‘homeEntry’) was not found in ‘./homeEntry’ (possible exports: homeEntryGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘landingPageEntry’ (reexported as ‘landingPageEntry’) was not found in ‘./landingPageEntry’ (possible exports: landingPageEntryGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘profileEntry’ (reexported as ‘profileEntry’) was not found in ‘./profileEntry’ (possible exports: profileEntryGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘resourcesDefaultEntry’ (reexported as ‘resourcesDefaultEntry’) was not found in ‘./resourcesDefaultEntry’ (possible exports: resourcesDefaultEntryGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘resourcesListingEntry’ (reexported as ‘resourcesListingEntry’) was not found in ‘./resourcesListingEntry’ (possible exports: resourcesListingEntryGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘sponsorEntry’ (reexported as ‘sponsorEntry’) was not found in ‘./sponsorEntry’ (possible exports: sponsorEntryGQL)
4:06:40 AM: warning ./src/gatsby-fragments/entries/index.js
4:06:40 AM: export ‘testimonialEntry’ (reexported as ‘testimonialEntry’) was not found in ‘./testimonialEntry’ (possible exports: testimonialEntryGQL)
4:06:40 AM: success Building production JavaScript and CSS bundles - 6.898s
4:06:46 AM: success Building HTML renderer - 6.706s
4:06:46 AM: success Execute page configs - 0.093s
4:06:46 AM: success Caching Webpack compilations - 0.001s
4:08:54 AM: warning Query takes too long:
4:08:54 AM: File path: /opt/build/repo/src/hooks/useCaseStudiesEntries.js
4:08:55 AM: warning Query takes too long:
4:08:55 AM: File path: /opt/build/repo/src/components/templates/EntryTemplate.js
4:08:55 AM: URL path: /resources
4:08:55 AM: Context: {
4:08:55 AM: “id”: “pages_ResourcesListing_Entry:1283:1”,
4:08:55 AM: “pagePath”: “/resources”
4:08:55 AM: }
4:08:55 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:undefined
4:08:55 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:undefined
4:08:55 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:undefined
4:08:55 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:undefined
4:08:55 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:undefined
4:08:55 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:undefined
4:08:55 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:undefined
4:08:56 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:08:56 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:08:56 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:08:56 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:08:56 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:08:56 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:08:58 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:08:58 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:08:58 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:08:58 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:08:58 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:08:59 AM: warning You can’t use childImageSharp together with users2_2021-11-02-113655_duwz.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:08:59 AM: warning You can’t use childImageSharp together with heart_2021-11-02-113715_izdb.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:08:59 AM: warning You can’t use childImageSharp together with star_2021-11-02-113644_zxcr.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:08:59 AM: warning You can’t use childImageSharp together with phone-portrait_2021-11-02-113702_qlrh.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:09:00 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:09:00 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:09:00 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:09:00 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:09:00 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:09:00 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:09:00 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/components/templates/EntryTemplate.js
4:09:00 AM: warning You can’t use childImageSharp together with logo-black.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/pages/index.js
4:09:01 AM: warning You can’t use childImageSharp together with bolt-solid_2021-11-22-063506_ewjk.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/pages/index.js
4:09:01 AM: warning You can’t use childImageSharp together with users-solid.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/pages/index.js
4:09:01 AM: warning You can’t use childImageSharp together with star_2021-11-02-113637_hzgm.svg — use publicURL instead. The childImageSharp portion of the query in this file will return null:/opt/build/repo/src/pages/index.js
4:09:02 AM: success run queries in workers - 135.270s - 38/38 0.28/s
4:09:02 AM: success Merge worker state - 0.006s
4:09:02 AM: success Rewriting compilation hashes - 0.001s
4:09:02 AM: success Writing page-data.json files to public directory - 0.039s - 36/36 926.83/s
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: warning [gatsby-plugin-image] Missing image prop
4:09:07 AM: success Building static HTML for pages - 4.507s - 50/50 11.09/s
4:09:10 AM: success index to Algolia - 2.550s - Done!
4:09:10 AM: success onPostBuild - 2.584s
4:09:10 AM:
4:09:10 AM: Pages
4:09:10 AM: ┌ src/components/templates/EntryTemplate.js
4:09:10 AM: │ ├ /resources
4:09:10 AM: │ └ …45 more pages available
4:09:10 AM: ├ src/pages/404.js
4:09:10 AM: │ ├ /404/
4:09:10 AM: │ └ /404.html
4:09:10 AM: ├ src/pages/index.js
4:09:10 AM: │ └ /
4:09:10 AM: └ src/pages/live-preview/[…entryUri].js
4:09:10 AM: └ /live-preview/[…entryUri]/
4:09:10 AM: ╭────────────────────────────────────────────────────────────────────╮
4:09:10 AM: │ │
4:09:10 AM: │ (SSG) Generated at build time │
4:09:10 AM: │ D (DSG) Deferred static generation - page generated at runtime │
4:09:10 AM: │ ∞ (SSR) Server-side renders at runtime (uses getServerData) │
4:09:10 AM: │ λ (Function) Gatsby function │
4:09:10 AM: │ │
4:09:10 AM: ╰────────────────────────────────────────────────────────────────────╯
4:09:10 AM: info Done building in 253.48603508 sec
4:09:10 AM: Done in 253.66s.
4:09:10 AM: ​
4:09:10 AM: (build.command completed in 4m 13.8s)
4:09:10 AM: ​
4:09:10 AM: ────────────────────────────────────────────────────────────────
4:09:10 AM: 3. @netlify/plugin-gatsby (onBuild event)
4:09:10 AM: ────────────────────────────────────────────────
4:09:23 AM: ​
4:09:23 AM: (Netlify Build completed in 4m 28.9s)
4:09:23 AM: Caching artifacts
4:09:23 AM: Started saving node modules
4:09:23 AM: Finished saving node modules
4:09:23 AM: Started saving build plugins
4:09:23 AM: Finished saving build plugins
4:09:23 AM: Started saving yarn cache
4:09:24 AM: Starting post processing
4:09:24 AM: Post processing - HTML
4:09:26 AM: Post processing - header rules
4:09:26 AM: Post processing - redirect rules
4:09:26 AM: Post processing done
4:09:26 AM: Site is live :sparkles:
4:09:31 AM: Finished saving yarn cache
4:09:31 AM: Started saving pip cache
4:09:31 AM: Finished saving pip cache
4:09:31 AM: Started saving emacs cask dependencies
4:09:31 AM: Finished saving emacs cask dependencies
4:09:31 AM: Started saving maven dependencies
4:09:31 AM: Finished saving maven dependencies
4:09:31 AM: Started saving boot dependencies
4:09:32 AM: Finished saving boot dependencies
4:09:32 AM: Started saving rust rustup cache
4:09:32 AM: Finished saving rust rustup cache
4:09:32 AM: Started saving go dependencies
4:09:32 AM: Finished saving go dependencies
4:09:32 AM: Build script success

2

Hey there, @acarioca :wave:

Sorry to hear you are encountering troubles here! Do you have a repo you can share with us for this site? This will help us look into this further.

Thanks so much!

3

Thanks Hillary!

Yes, but it is a private repo, how should I share with you? If you give me your handle I can add you with read rights.

4

Hey @acarioca,

Could you point us to the URLs of the pages where the images are not correctly loading? Before we look at the repo, maybe looking at the page would give us some ideas as to what might be happening?

1 Like
5

Sure thing, here’s an example:
https://sandbox.codeforaustralia.org/case-studies/closing-the-loop-on-waste-dashboard

On this page, there was supposed to be a header/cover picture below the title as well as thumbnail images next to team member names under TEAM and a logo under PARTNERS.

https://sandbox.codeforaustralia.org
On this page, the Case Studies section should have images on the sliding card blocks.

Thanks for the help!

Alice

6

Wow, this is interesting. The site is simply missing the HTML markup for the images in all of those places. I thought there would be some errors in loading the images or something of that sort, but this is missing the image markup altogether.

So yeah unfortunately, this might need repo access to troubleshoot further. You could add Hrishikesh-K on GitHub,

7

Exactly, super strange because some images in the same markup do show, when others don’t!

[Github invite sent]

8

Well I tried to build your website locally and I’m seeing the same problem:

image
image1430×512 107 KB

As you can see, the image simply doesn’t end up in the markup. If I understand correctly, it should be in the <div class="h-full mx-auto lg:w-6/12"></div>.

If this indeed works for you as expected on your machine or Vercel, I’d be interested to know the differences that might be in Netlify build environment vs your environment.

9

Here is the Vercel link - I deployed the same repo there with same env variables for testing purposes and it all works as intended, so I’m not sure what is the issue: https://cfa-website.vercel.app/

11

Hey @acarioca,

This is indeed weird behaviour. I did this it on Vercel and it appears to work fine there as you say. My local build still misses the HTML markup like I’ve shown and that has no traces on Netlify, so Netlify doesn’t seem to be the only place where this is failing.

I’ve also looped in our Gatsby experts here to share some insights. I’d let you know once we hear back from them.

12

Hey @acarioca,

While the developers actually are able to check it, their initial impressions were something like this:

The reason it’s [the markup for the image] missing from the HTML is because gatsby-plugin-image returns null if there’s no image prop passed to it. My guess is that it’s flaky images which just happen to work ok on Vercel by chances like a different Node version.

Does this work fine for you locally? Would you be able to check if the images are reading null?

13

Hey @hrishikesh and Hillary,

Thanks o much for helping! It works fine locally on develop and build commands but I do see the problem locally when I run yarn serve.

What do they mean by “flaky” images? Unreliable? What should I do to test this? Should I replace them? The same image shows in one page but not another :face_with_monocle: and sometimes it appears in one deploy but then disappears in another.

14

Yeah, that’s correct. Based on your description, that does sound like the case.

How are you getting those images? Do they exist in your repo? If not, I’d suggest trying to use some images from the repo to see if those work consistently.

15

@acarioca Did you find a solution to this? We are seeing the same thing with one of our sites.

Thanks,
Ben

16

hey there @seso,

Thanks for reaching out. Can you please outline exactly the issues you are encountering on your site? Additionally, please share your site name, your project repo, and your most recent deploy log so that we can look into this further.

17

Thanks @hillary.

We are experiencing similar issues as the original poster: image elements are not in the html (in our case it is a picture element). We are also having builds fail, which we think has something to do with image processing. We have removed large images and are combing through to make sure we didn’t leave anything behind.

Things feel very inconsistent, working one day, and not the next.

The site is tedatwork.ted.com.
The repo is private.
Latest deploy log is here Netlify App.

18

Hi @seso,

It’s happening because your build is consuming too much memory:

image
image911×291 30.7 KB

In the log you linked, the build went up to 9 GB and then it failed.

Try optimising your build process, or you might have to build locally and deploy via CLI.