Hi everyone,
I have this issue related to images, all images work except the ones I embed in my contentful posts. I’m using NextJS with the contenful react rich text renderer to show my posts. The images coming with the posts are displayed this way:
[BLOCKS.EMBEDDED_ASSET]: (node: ReactNode) => {
return (
<Box width="100%" display="inline-block" position="relative">
<Image
//@ts-ignore
src={`https://${node.data.target.fields.file.url}?q=${100}`}
//@ts-ignore
blurDataURL={`https://${node.data.target.fields.file.url}?q=${10}`}
alt="#"
placeholder="blur"
//@ts-ignore
width={`${node.data.target.fields.file.details.image.width}px`}
//@ts-ignore
height={`${node.data.target.fields.file.details.image.height}px`}
layout="responsive"
objectFit="cover"
/>
</Box>
);
},
This works when executing next build && next start, locally I have no problem with that images but when I deploy to Netlify they are not loaded.
This is my build log:
7:12:13 PM: Build ready to start
7:12:15 PM: build-image version: 122b31996ccaffd45d820a452d6227f8312110cc (focal)
7:12:15 PM: build-image tag: v4.5.3
7:12:15 PM: buildbot version: 9bc48650b0551281ca8258d0c32d371dd2b6993b
7:12:16 PM: Building without cache
7:12:16 PM: Starting to prepare the repo for build
7:12:16 PM: No cached dependencies found. Cloning fresh repo
7:12:16 PM: git clone https://github.com/carlos-molero/personal-website
7:12:16 PM: Preparing Git Reference refs/heads/master
7:12:17 PM: Parsing package.json dependencies
7:12:18 PM: Starting build script
7:12:18 PM: Installing dependencies
7:12:18 PM: Python version set to 2.7
7:12:19 PM: Downloading and installing node v16.14.0...
7:12:19 PM: Downloading https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.xz...
7:12:19 PM: Computing checksum with sha256sum
7:12:19 PM: Checksums matched!
7:12:23 PM: Now using node v16.14.0 (npm v8.3.1)
7:12:23 PM: Started restoring cached build plugins
7:12:23 PM: Finished restoring cached build plugins
7:12:23 PM: Attempting ruby version 2.7.2, read from environment
7:12:25 PM: Using ruby version 2.7.2
7:12:25 PM: Using PHP version 8.0
7:12:25 PM: Started restoring cached yarn cache
7:12:25 PM: Finished restoring cached yarn cache
7:12:26 PM: No yarn workspaces detected
7:12:26 PM: Started restoring cached node modules
7:12:26 PM: Finished restoring cached node modules
7:12:26 PM: Installing NPM modules using Yarn version 1.22.10
7:12:27 PM: yarn install v1.22.10
7:12:27 PM: [1/4] Resolving packages...
7:12:27 PM: [2/4] Fetching packages...
7:12:54 PM: info @next/swc-android-arm64@12.1.0: The platform "linux" is incompatible with this module.
7:12:54 PM: info "@next/swc-android-arm64@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
7:12:54 PM: info @next/swc-android-arm64@12.1.0: The CPU architecture "x64" is incompatible with this module.
7:12:54 PM: info @next/swc-darwin-arm64@12.1.0: The platform "linux" is incompatible with this module.
7:12:54 PM: info "@next/swc-darwin-arm64@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
7:12:54 PM: info @next/swc-darwin-arm64@12.1.0: The CPU architecture "x64" is incompatible with this module.
7:12:54 PM: info @next/swc-darwin-x64@12.1.0: The platform "linux" is incompatible with this module.
7:12:54 PM: info "@next/swc-darwin-x64@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
7:12:54 PM: info @next/swc-linux-arm-gnueabihf@12.1.0: The CPU architecture "x64" is incompatible with this module.
7:12:54 PM: info "@next/swc-linux-arm-gnueabihf@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
7:12:54 PM: info @next/swc-linux-arm64-gnu@12.1.0: The CPU architecture "x64" is incompatible with this module.
7:12:54 PM: info "@next/swc-linux-arm64-gnu@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
7:12:54 PM: info @next/swc-linux-arm64-musl@12.1.0: The CPU architecture "x64" is incompatible with this module.
7:12:54 PM: info "@next/swc-linux-arm64-musl@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
7:12:54 PM: info @next/swc-win32-arm64-msvc@12.1.0: The platform "linux" is incompatible with this module.
7:12:54 PM: info "@next/swc-win32-arm64-msvc@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
7:12:54 PM: info @next/swc-win32-arm64-msvc@12.1.0: The CPU architecture "x64" is incompatible with this module.
7:12:54 PM: info @next/swc-win32-ia32-msvc@12.1.0: The platform "linux" is incompatible with this module.
7:12:54 PM: info "@next/swc-win32-ia32-msvc@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
7:12:54 PM: info @next/swc-win32-ia32-msvc@12.1.0: The CPU architecture "x64" is incompatible with this module.
7:12:54 PM: info @next/swc-win32-x64-msvc@12.1.0: The platform "linux" is incompatible with this module.
7:12:54 PM: info "@next/swc-win32-x64-msvc@12.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
7:12:54 PM: [3/4] Linking dependencies...
7:12:54 PM: warning "@emotion/styled > @emotion/babel-plugin@11.7.2" has unmet peer dependency "@babel/core@^7.0.0".
7:12:54 PM: warning "@emotion/styled > @emotion/babel-plugin > @babel/plugin-syntax-jsx@7.16.7" has unmet peer dependency "@babel/core@^7.0.0-0".
7:12:54 PM: warning " > next-images@1.8.4" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
7:12:54 PM: warning "next-images > file-loader@6.2.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
7:12:54 PM: warning "next-images > url-loader@4.1.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
7:12:54 PM: warning " > react-elastic-carousel@0.11.5" has unmet peer dependency "prop-types@^15.5.4".
7:12:54 PM: warning "react-elastic-carousel > react-only-when@1.0.2" has unmet peer dependency "prop-types@^15.5.4".
7:12:54 PM: warning "react-elastic-carousel > react-only-when@1.0.2" has incorrect peer dependency "react@^15.0.0 || ^16.0.0".
7:12:54 PM: warning "react-elastic-carousel > react-only-when@1.0.2" has incorrect peer dependency "react-dom@^15.0.0 || ^16.0.0".
7:12:54 PM: warning "react-elastic-carousel > react-swipeable@5.5.1" has incorrect peer dependency "react@^16.0.0-0".
7:12:54 PM: warning " > styled-components@5.3.3" has unmet peer dependency "react-is@>= 16.8.0".
7:13:01 PM: [4/4] Building fresh packages...
7:13:02 PM: Done in 35.27s.
7:13:02 PM: NPM modules installed using Yarn
7:13:03 PM: Started restoring cached go cache
7:13:03 PM: Finished restoring cached go cache
7:13:03 PM: go version go1.16.5 linux/amd64
7:13:03 PM: go version go1.16.5 linux/amd64
7:13:03 PM: Installing missing commands
7:13:03 PM: Verify run directory
7:13:05 PM:
7:13:05 PM: ────────────────────────────────────────────────────────────────
7:13:05 PM: Netlify Build
7:13:05 PM: ────────────────────────────────────────────────────────────────
7:13:05 PM:
7:13:05 PM: ❯ Version
7:13:05 PM: @netlify/build 26.3.3
7:13:05 PM:
7:13:05 PM: ❯ Flags
7:13:05 PM: baseRelDir: true
7:13:05 PM: buildId: 6212847d874d450b5262d7dd
7:13:05 PM: deployId: 6212847d874d450b5262d7df
7:13:05 PM:
7:13:05 PM: ❯ Current directory
7:13:05 PM: /opt/build/repo
7:13:05 PM:
7:13:05 PM: ❯ Config file
7:13:05 PM: No config file was defined: using default values.
7:13:05 PM:
7:13:05 PM: ❯ Context
7:13:05 PM: production
7:13:05 PM:
7:13:05 PM: ❯ Installing plugins
7:13:05 PM: - @netlify/plugin-nextjs@4.2.7
7:13:20 PM:
7:13:20 PM: ❯ Loading plugins
7:13:20 PM: - @netlify/plugin-nextjs@4.2.7 from Netlify app
7:13:22 PM:
7:13:22 PM: ────────────────────────────────────────────────────────────────
7:13:22 PM: 1. @netlify/plugin-nextjs (onPreBuild event)
7:13:22 PM: ────────────────────────────────────────────────────────────────
7:13:22 PM:
7:13:22 PM: No Next.js cache to restore.
7:13:22 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
7:13:22 PM:
7:13:22 PM: (@netlify/plugin-nextjs onPreBuild completed in 26ms)
7:13:22 PM:
7:13:22 PM: ────────────────────────────────────────────────────────────────
7:13:22 PM: 2. Build command from Netlify app
7:13:22 PM: ────────────────────────────────────────────────────────────────
7:13:22 PM:
7:13:22 PM: $ yarn build
7:13:22 PM: yarn run v1.22.10
7:13:22 PM: $ next build
7:13:23 PM: warn - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
7:13:23 PM: info - Checking validity of types...
7:13:34 PM: ./pages/blogs/index.tsx
7:13:34 PM: 47:6 Warning: React Hook useEffect has a missing dependency: 'props.categories'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
7:13:34 PM: info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
7:13:34 PM: info - Creating an optimized production build...
7:14:17 PM: info - Compiled successfully
7:14:17 PM: info - Collecting page data...
7:14:22 PM: info - Generating static pages (0/6)
7:14:22 PM: [contentfulSvc.getClient()] - contentful API Client initialized
7:14:22 PM: info - Generating static pages (1/6)
7:14:23 PM: [contentfulSvc.getClient()] - contentful API Client initialized
7:14:23 PM: info - Generating static pages (2/6)
7:14:23 PM: [contentfulSvc.getClient()] - contentful API Client initialized
7:14:23 PM: info - Generating static pages (4/6)
7:14:23 PM: [contentfulSvc.getClient()] - contentful API Client initialized
7:14:23 PM: [contentfulSvc.getClient()] - contentful API Client initialized
7:14:23 PM: info - Generating static pages (6/6)
7:14:23 PM: info - Finalizing page optimization...
7:14:23 PM: Page Size First Load JS
7:14:23 PM: ┌ ○ / (459 ms) 3.57 kB 179 kB
7:14:23 PM: ├ /_app 0 B 176 kB
7:14:23 PM: ├ ○ /404 194 B 176 kB
7:14:23 PM: ├ ● /blogs (ISR: 7200 Seconds) (766 ms) 26.4 kB 246 kB
7:14:23 PM: ├ λ /blogs/[bid] 295 kB 490 kB
7:14:23 PM: ├ └ css/83b7f8e18c18b5e5.css 618 B
7:14:23 PM: ├ ○ /contact 839 B 177 kB
7:14:23 PM: └ ● /projects (632 ms) 5.8 kB 206 kB
7:14:23 PM: + First Load JS shared by all 176 kB
7:14:23 PM: ├ chunks/framework-5f4595e5518b5600.js 42 kB
7:14:23 PM: ├ chunks/main-a054bbf31fb90f6a.js 27.6 kB
7:14:23 PM: ├ chunks/pages/_app-62060586f8b9e762.js 105 kB
7:14:23 PM: ├ chunks/webpack-cb7634a8b6194820.js 884 B
7:14:23 PM: └ css/8f8b9414ad93b628.css 2.51 kB
7:14:23 PM: λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
7:14:23 PM: ○ (Static) automatically rendered as static HTML (uses no initial props)
7:14:23 PM: ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
7:14:23 PM: (ISR) incremental static regeneration (uses revalidate in getStaticProps)
7:14:23 PM: Done in 61.23s.
7:14:23 PM:
7:14:23 PM: (build.command completed in 1m 1.4s)
7:14:23 PM:
7:14:23 PM: ────────────────────────────────────────────────────────────────
7:14:23 PM: 3. @netlify/plugin-nextjs (onBuild event)
7:14:23 PM: ────────────────────────────────────────────────────────────────
7:14:23 PM:
7:14:23 PM: Patching /opt/build/repo/node_modules/next/dist/server/base-server.js
7:14:23 PM: Done
7:14:23 PM: Moving static page files to serve from CDN...
7:14:23 PM: Moved 4 files
7:14:23 PM: Netlify configuration property "redirects" value changed to [
7:14:23 PM: { from: '/_next/static/*', to: '/static/:splat', status: 200 },
7:14:23 PM: {
7:14:23 PM: from: '/_next/image*',
7:14:23 PM: query: { url: ':url', w: ':width', q: ':quality' },
7:14:23 PM: to: '/_ipx/w_:width,q_:quality/:url',
7:14:23 PM: status: 301
7:14:23 PM: },
7:14:23 PM: { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
7:14:23 PM: { from: '/cache/*', to: '/404.html', status: 404, force: true },
7:14:23 PM: { from: '/server/*', to: '/404.html', status: 404, force: true },
7:14:23 PM: { from: '/serverless/*', to: '/404.html', status: 404, force: true },
7:14:23 PM: { from: '/traces', to: '/404.html', status: 404, force: true },
7:14:23 PM: {
7:14:23 PM: from: '/routes-manifest.json',
7:14:23 PM: to: '/404.html',
7:14:23 PM: status: 404,
7:14:23 PM: force: true
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/build-manifest.json',
7:14:23 PM: to: '/404.html',
7:14:23 PM: status: 404,
7:14:23 PM: force: true
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/prerender-manifest.json',
7:14:23 PM: to: '/404.html',
7:14:23 PM: status: 404,
7:14:23 PM: force: true
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/react-loadable-manifest.json',
7:14:23 PM: to: '/404.html',
7:14:23 PM: status: 404,
7:14:23 PM: force: true
7:14:23 PM: },
7:14:23 PM: { from: '/BUILD_ID', to: '/404.html', status: 404, force: true },
7:14:23 PM: {
7:14:23 PM: from: '/api',
7:14:23 PM: to: '/.netlify/functions/___netlify-handler',
7:14:23 PM: status: 200
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/api/*',
7:14:23 PM: to: '/.netlify/functions/___netlify-handler',
7:14:23 PM: status: 200
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/empty.svg',
7:14:23 PM: to: '/empty.svg',
7:14:23 PM: conditions: { Cookie: [Array] },
7:14:23 PM: status: 200
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/favicon.ico',
7:14:23 PM: to: '/favicon.ico',
7:14:23 PM: conditions: { Cookie: [Array] },
7:14:23 PM: status: 200
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/logo.png',
7:14:23 PM: to: '/logo.png',
7:14:23 PM: conditions: { Cookie: [Array] },
7:14:23 PM: status: 200
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/thumbnail.png',
7:14:23 PM: to: '/thumbnail.png',
7:14:23 PM: conditions: { Cookie: [Array] },
7:14:23 PM: status: 200
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/images/avatar.png',
7:14:23 PM: to: '/images/avatar.png',
7:14:23 PM: conditions: { Cookie: [Array] },
7:14:23 PM: status: 200
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/*',
7:14:23 PM: to: '/.netlify/functions/___netlify-handler',
7:14:23 PM: status: 200,
7:14:23 PM: conditions: { Cookie: [Array] },
7:14:23 PM: force: true
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/_next/data/EAT7pcVXEZIn--WdX-mHd/blogs.json',
7:14:23 PM: to: '/.netlify/builders/___netlify-odb-handler',
7:14:23 PM: status: 200,
7:14:23 PM: force: true
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/blogs',
7:14:23 PM: to: '/.netlify/builders/___netlify-odb-handler',
7:14:23 PM: status: 200,
7:14:23 PM: force: true
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/_next/data/EAT7pcVXEZIn--WdX-mHd/index.json',
7:14:23 PM: to: '/.netlify/functions/___netlify-handler',
7:14:23 PM: status: 200,
7:14:23 PM: force: false
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/',
7:14:23 PM: to: '/.netlify/functions/___netlify-handler',
7:14:23 PM: status: 200,
7:14:23 PM: force: false
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/_next/data/EAT7pcVXEZIn--WdX-mHd/contact.json',
7:14:23 PM: to: '/.netlify/functions/___netlify-handler',
7:14:23 PM: status: 200,
7:14:23 PM: force: false
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/contact',
7:14:23 PM: to: '/.netlify/functions/___netlify-handler',
7:14:23 PM: status: 200,
7:14:23 PM: force: false
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/_next/data/EAT7pcVXEZIn--WdX-mHd/blogs/:bid.json',
7:14:23 PM: to: '/.netlify/functions/___netlify-handler',
7:14:23 PM: status: 200,
7:14:23 PM: force: false
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/blogs/:bid',
7:14:23 PM: to: '/.netlify/functions/___netlify-handler',
7:14:23 PM: status: 200,
7:14:23 PM: force: false
7:14:23 PM: },
7:14:23 PM: {
7:14:23 PM: from: '/*',
7:14:23 PM: to: '/.netlify/functions/___netlify-handler',
7:14:23 PM: status: 200
7:14:23 PM: }
7:14:23 PM: ].
7:14:23 PM:
7:14:23 PM: (@netlify/plugin-nextjs onBuild completed in 96ms)
7:14:23 PM:
7:14:23 PM: ────────────────────────────────────────────────────────────────
7:14:23 PM: 4. Functions bundling
7:14:23 PM: ────────────────────────────────────────────────────────────────
7:14:23 PM:
7:14:23 PM: Packaging Functions from .netlify/functions-internal directory:
7:14:23 PM: - ___netlify-handler/___netlify-handler.js
7:14:23 PM: - ___netlify-odb-handler/___netlify-odb-handler.js
7:14:23 PM: - _ipx/_ipx.js
7:14:23 PM:
7:14:52 PM:
7:14:52 PM: (Functions bundling completed in 28.9s)
7:14:52 PM:
7:14:52 PM: ────────────────────────────────────────────────────────────────
7:14:52 PM: 5. @netlify/plugin-nextjs (onPostBuild event)
7:14:52 PM: ────────────────────────────────────────────────────────────────
7:14:52 PM:
7:14:53 PM: Next.js cache saved.
7:14:53 PM:
7:14:53 PM: (@netlify/plugin-nextjs onPostBuild completed in 754ms)
7:14:53 PM:
7:14:53 PM: ────────────────────────────────────────────────────────────────
7:14:53 PM: 6. Deploy site
7:14:53 PM: ────────────────────────────────────────────────────────────────
7:14:53 PM:
7:14:53 PM: Starting to deploy site from '.next'
7:14:54 PM: Creating deploy tree
7:14:54 PM: Creating deploy upload records
7:14:54 PM: 24 new files to upload
7:14:54 PM: 2 new functions to upload
7:15:04 PM: Site deploy was successfully initiated
7:15:04 PM:
7:15:04 PM: (Deploy site completed in 11.1s)
7:15:04 PM:
7:15:04 PM: ────────────────────────────────────────────────────────────────
7:15:04 PM: Netlify Build Complete
7:15:04 PM: ────────────────────────────────────────────────────────────────
7:15:04 PM:
7:15:04 PM: (Netlify Build completed in 1m 59.5s)
7:15:04 PM: Starting post processing
7:15:04 PM: Post processing - HTML
7:15:05 PM: Caching artifacts
7:15:05 PM: Started saving node modules
7:15:05 PM: Finished saving node modules
7:15:05 PM: Started saving build plugins
7:15:05 PM: Finished saving build plugins
7:15:05 PM: Started saving yarn cache
7:15:05 PM: Post processing - header rules
7:15:05 PM: Post processing - redirect rules
7:15:05 PM: Post processing done
7:15:06 PM: Site is live ✨
7:15:09 PM: Finished saving yarn cache
7:15:09 PM: Started saving pip cache
7:15:09 PM: Finished saving pip cache
7:15:09 PM: Started saving emacs cask dependencies
7:15:09 PM: Finished saving emacs cask dependencies
7:15:09 PM: Started saving maven dependencies
7:15:09 PM: Finished saving maven dependencies
7:15:09 PM: Started saving boot dependencies
7:15:09 PM: Finished saving boot dependencies
7:15:09 PM: Started saving rust rustup cache
7:15:09 PM: Finished saving rust rustup cache
7:15:09 PM: Started saving go dependencies
7:15:09 PM: Finished saving go dependencies
7:15:12 PM: Build script success
7:17:19 PM: Finished processing build request in 5m3.318559757s
When I open the console I can see:
/_ipx/w_1920,q_75/https%3A%2F%2F%2F%2Fimages.ctfassets.net%2Ffafkuvpdy3b4%2F1zhJFV8sVYBePSqhp42ZyU%2F63799e5d00a7fc47f6ace7d04bf0a5b9%2Fsadasd.jpeg?url=https%3A%2F%2F%2F%2Fimages.ctfassets.net%2Ffafkuvpdy3b4%2F1zhJFV8sVYBePSqhp42ZyU%2F63799e5d00a7fc47f6ace7d04bf0a5b9%2Fsadasd.jpeg&w=1920&q=75:1 Failed to load resource: the server responded with a status of 403 ()
https%3A%2F%2F%2F%2Fimages.ctfassets.net%2Ffafkuvpdy3b4%2F1zhJFV8sVYBePSqhp42ZyU%2F63799e5d00a7fc47f6ace7d04bf0a5b9%2Fsadasd.jpeg:1 Failed to load resource: the server responded with a status of 403 ()
If I go to the url:
Hostname is missing: https:////images.ctfassets.net/fafkuvpdy3b4/1zhJFV8sVYBePSqhp42ZyU/63799e5d00a7fc47f6ace7d04bf0a5b9/sadasd.jpeg
But my image configuration is correct and it works locally:
/** @type {import('next').NextConfig} */
const withImages = require("next-images");
module.exports = {
reactStrictMode: true,
images: {
domains: ["images.ctfassets.net"],
},
withImages: withImages(),
};
My sitename: serene-hodgkin-73d421
Next version:
"next": "12.1.0",
"next-images": "^1.8.4",
Thanks in advance.