Leading slash for relative image in NextJS

Netlify CMS
,
1

I can’t seem to troubleshoot why this is happening, all the sample config.yml and starter templates i’ve worked through give image links with relative links but mine doesn’t.

This is the config.yml file:

backend:
  name: git-gateway
  branch: main
media_folder: public/img
public_folder: /img

collections:
  - label: "Pages"
    name: "pages"
    files:
      - label: "Home"
        name: "home"
        file: "content/home.md"
        fields:
          - {label: Title, name: title, widget: string}
          - {label: Intro text, name: intro, widget: text}
          - {label: Image, name: image, widget: image}

But this is the markdown it is creating:

---
title: New Title
intro: blabbidy blah blah intro text
image: img/occasions-thumb.jpg
---

So when i use a component like this:

export default class Home extends Component {
  render() {
    let { title, intro, image } = attributes;
    return (
      <>
        <Head>
          <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
        </Head>
        <article>
          <h1>{title}</h1>
          <p>{intro}</p>
          <Image
            src={image}
            alt={title}
            width="600"
            height="500"
            layout="responsive"
          />        
        </article>
      </>
    )
  }
}

It gives me this error:

Error: Failed to parse src "img/occasions-thumb.jpg" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL

If i manually add a leading slash to the markdown it obviously works, but not sure how to make Netlify CMS generate that organically. Thanks for the help.

2

Hey there, @npbw :wave:

Thanks so much for reaching out, and welcome to the Netlify Forums. Can you please share your site with us, as well as your full recent deploy log?

3

Thank you! Here’s the site: https://polite-travesseiro-d66a6c.netlify.app/

I realized after posting this that the version on the Netlify servers actually doesn’t produce this error, but my local build does. Any idea on how to reconcile the two together?

Here the most recent deploy log:

12:59:33 PM: Waiting for other deploys from your team to complete. Check the queue: https://app.netlify.com/teams/nperera/builds
12:59:50 PM: Build ready to start
12:59:52 PM: build-image version: d2c6dbeac570350a387d832f64bc980dc964ad65 (focal)
12:59:52 PM: build-image tag: v4.8.0
12:59:52 PM: buildbot version: 29e546ddee264a16af472b38ccba15b350150213
12:59:52 PM: Fetching cached dependencies
12:59:52 PM: Starting to download cache of 192.2MB
12:59:54 PM: Finished downloading cache in 2.05208993s
12:59:54 PM: Starting to extract cache
12:59:58 PM: Finished extracting cache in 4.276436201s
12:59:58 PM: Finished fetching cache in 6.353979982s
12:59:58 PM: Starting to prepare the repo for build
12:59:58 PM: Preparing Git Reference refs/heads/main
1:00:04 PM: Parsing package.json dependencies
1:00:05 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: '.next' versus 'out' in the Netlify UI
1:00:05 PM: Different build command detected, going to use the one specified in the Netlify configuration file: 'npm run build' versus 'npm run export' in the Netlify UI
1:00:06 PM: Starting build script
1:00:06 PM: Installing dependencies
1:00:06 PM: Python version set to 2.7
1:00:06 PM: Started restoring cached node version
1:00:07 PM: Finished restoring cached node version
1:00:07 PM: v16.15.0 is already installed.
1:00:08 PM: Now using node v16.15.0 (npm v8.5.5)
1:00:08 PM: Started restoring cached build plugins
1:00:08 PM: Finished restoring cached build plugins
1:00:08 PM: Attempting ruby version 2.7.2, read from environment
1:00:09 PM: Using ruby version 2.7.2
1:00:09 PM: Using PHP version 8.0
1:00:10 PM: No npm workspaces detected
1:00:10 PM: Started restoring cached node modules
1:00:10 PM: Finished restoring cached node modules
1:00:10 PM: Started restoring cached go cache
1:00:10 PM: Finished restoring cached go cache
1:00:10 PM: go version go1.16.5 linux/amd64
1:00:10 PM: go version go1.16.5 linux/amd64
1:00:10 PM: Installing missing commands
1:00:10 PM: Verify run directory
1:00:12 PM: ​
1:00:12 PM: ────────────────────────────────────────────────────────────────
1:00:12 PM:   Netlify Build                                                 
1:00:12 PM: ────────────────────────────────────────────────────────────────
1:00:12 PM: ​
1:00:12 PM: ❯ Version
1:00:12 PM:   @netlify/build 27.1.1
1:00:12 PM: ​
1:00:12 PM: ❯ Flags
1:00:12 PM:   baseRelDir: true
1:00:12 PM:   buildId: 6283fea569d64f00098cf2a8
1:00:12 PM:   deployId: 6283fea569d64f00098cf2aa
1:00:12 PM: ​
1:00:12 PM: ❯ Current directory
1:00:12 PM:   /opt/build/repo
1:00:12 PM: ​
1:00:12 PM: ❯ Config file
1:00:12 PM:   /opt/build/repo/netlify.toml
1:00:12 PM: ​
1:00:12 PM: ❯ Context
1:00:12 PM:   production
1:00:12 PM: ​
1:00:12 PM: ❯ Loading plugins
1:00:12 PM:    - @netlify/plugin-nextjs@4.7.0 from netlify.toml and package.json
1:00:13 PM: ​
1:00:13 PM: ────────────────────────────────────────────────────────────────
1:00:13 PM:   1. @netlify/plugin-nextjs (onPreBuild event)                  
1:00:13 PM: ────────────────────────────────────────────────────────────────
1:00:13 PM: ​
1:00:13 PM: Next.js cache restored.
1:00:13 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
1:00:13 PM: ​
1:00:13 PM: (@netlify/plugin-nextjs onPreBuild completed in 102ms)
1:00:13 PM: ​
1:00:13 PM: ────────────────────────────────────────────────────────────────
1:00:13 PM:   2. build.command from netlify.toml                            
1:00:13 PM: ────────────────────────────────────────────────────────────────
1:00:13 PM: ​
1:00:13 PM: $ npm run build
1:00:14 PM: > next-netlify-starter@0.5.0 build
1:00:14 PM: > next build
1:00:14 PM: info  - Checking validity of types...
1:00:15 PM: warn  - No ESLint configuration detected. Run next lint to begin setup
1:00:15 PM: info  - Creating an optimized production build...
1:00:17 PM: info  - Compiled successfully
1:00:17 PM: info  - Collecting page data...
1:00:20 PM: info  - Generating static pages (0/3)
1:00:21 PM: info  - Generating static pages (3/3)
1:00:21 PM: info  - Finalizing page optimization...
1:00:21 PM: Page                                       Size     First Load JS
1:00:21 PM: ┌ ○ /                                      6.32 kB        78.3 kB
1:00:21 PM: ├   /_app                                  0 B            71.9 kB
1:00:21 PM: └ ○ /404                                   193 B          72.1 kB
1:00:21 PM: + First Load JS shared by all              71.9 kB
1:00:21 PM:   ├ chunks/framework-5f4595e5518b5600.js   42 kB
1:00:21 PM:   ├ chunks/main-f65e66e62fc5ca80.js        28.6 kB
1:00:21 PM:   ├ chunks/pages/_app-69da446bea935969.js  493 B
1:00:21 PM:   ├ chunks/webpack-69bfa6990bb9e155.js     769 B
1:00:21 PM:   └ css/37cac91dc690d06c.css               1.5 kB
1:00:21 PM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
1:00:21 PM: ​
1:00:21 PM: (build.command completed in 7.5s)
1:00:21 PM: ​
1:00:21 PM: ────────────────────────────────────────────────────────────────
1:00:21 PM:   3. @netlify/plugin-nextjs (onBuild event)                     
1:00:21 PM: ────────────────────────────────────────────────────────────────
1:00:21 PM: ​
1:00:21 PM: Patching /opt/build/repo/node_modules/next/dist/server/base-server.js
1:00:21 PM: Done
1:00:21 PM: Patching /opt/build/repo/node_modules/next/dist/server/next-server.js
1:00:21 PM: Done
1:00:21 PM: Moving static page files to serve from CDN...
1:00:21 PM: Moved 1 files
1:00:21 PM: Netlify configuration property "redirects" value changed to [
1:00:21 PM:   { from: '/_next/static/*', to: '/static/:splat', status: 200 },
1:00:21 PM:   {
1:00:21 PM:     from: '/_next/image*',
1:00:21 PM:     query: { url: ':url', w: ':width', q: ':quality' },
1:00:21 PM:     to: '/_ipx/w_:width,q_:quality/:url',
1:00:21 PM:     status: 301
1:00:21 PM:   },
1:00:21 PM:   { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
1:00:21 PM:   { from: '/cache/*', to: '/404.html', status: 404, force: true },
1:00:21 PM:   { from: '/server/*', to: '/404.html', status: 404, force: true },
1:00:21 PM:   { from: '/serverless/*', to: '/404.html', status: 404, force: true },
1:00:21 PM:   { from: '/trace', to: '/404.html', status: 404, force: true },
1:00:21 PM:   { from: '/traces', to: '/404.html', status: 404, force: true },
1:00:21 PM:   {
1:00:21 PM:     from: '/routes-manifest.json',
1:00:21 PM:     to: '/404.html',
1:00:21 PM:     status: 404,
1:00:21 PM:     force: true
1:00:21 PM:   },
1:00:21 PM:   {
1:00:21 PM:     from: '/build-manifest.json',
1:00:21 PM:     to: '/404.html',
1:00:21 PM:     status: 404,
1:00:21 PM:     force: true
1:00:21 PM:   },
1:00:21 PM:   {
1:00:21 PM:     from: '/prerender-manifest.json',
1:00:21 PM:     to: '/404.html',
1:00:21 PM:     status: 404,
1:00:21 PM:     force: true
1:00:21 PM:   },
1:00:21 PM:   {
1:00:21 PM:     from: '/react-loadable-manifest.json',
1:00:21 PM:     to: '/404.html',
1:00:21 PM:     status: 404,
1:00:21 PM:     force: true
1:00:21 PM:   },
1:00:21 PM:   { from: '/BUILD_ID', to: '/404.html', status: 404, force: true },
1:00:21 PM:   {
1:00:21 PM:     from: '/api',
1:00:21 PM:     to: '/.netlify/functions/___netlify-handler',
1:00:21 PM:     status: 200
1:00:21 PM:   },
1:00:21 PM:   {
1:00:21 PM:     from: '/api/*',
1:00:21 PM:     to: '/.netlify/functions/___netlify-handler',
1:00:21 PM:     status: 200
1:00:21 PM:   },
1:00:21 PM:   {
1:00:21 PM:     from: '/favicon.ico',
1:00:21 PM:     to: '/favicon.ico',
1:00:21 PM:     conditions: { Cookie: [Array] },
1:00:21 PM:     status: 200
1:00:21 PM:   },
1:00:21 PM:   {
1:00:21 PM:     from: '/netliheart.svg',
1:00:21 PM:     to: '/netliheart.svg',
1:00:21 PM:     conditions: { Cookie: [Array] },
1:00:21 PM:     status: 200
1:00:21 PM:   },
1:00:21 PM:   {
1:00:21 PM:     from: '/admin/config.yml',
1:00:21 PM:     to: '/admin/config.yml',
1:00:21 PM:     conditions: { Cookie: [Array] },
1:00:21 PM:     status: 200
1:00:21 PM:   },
1:00:21 PM:   {
1:00:21 PM:     from: '/admin/index.html',
1:00:21 PM:     to: '/admin/index.html',
1:00:21 PM:     conditions: { Cookie: [Array] },
1:00:21 PM:     status: 200
1:00:21 PM:   },
1:00:21 PM:   {
1:00:21 PM:     from: '/img/8be1abcc09aa5c31afc4cb72e3f71ead.png',
1:00:21 PM:     to: '/img/8be1abcc09aa5c31afc4cb72e3f71ead.png',
1:00:21 PM:     conditions: { Cookie: [Array] },
1:00:21 PM:     status: 200
1:00:21 PM:   },
1:00:21 PM:   {
1:00:21 PM:     from: '/img/occasions-thumb.jpg',
1:00:21 PM:     to: '/img/occasions-thumb.jpg',
1:00:21 PM:     conditions: { Cookie: [Array] },
1:00:21 PM:     status: 200
1:00:21 PM:   },
1:00:21 PM:   {
1:00:21 PM:     from: '/*',
1:00:21 PM:     to: '/.netlify/functions/___netlify-handler',
1:00:21 PM:     status: 200,
1:00:21 PM:     conditions: { Cookie: [Array] },
1:00:21 PM:     force: true
1:00:21 PM:   },
1:00:21 PM:   {
1:00:21 PM:     from: '/_next/data/QvAjOQnU-nzhvIVSu2XBw/index.json',
1:00:21 PM:     to: '/.netlify/functions/___netlify-handler',
1:00:21 PM:     status: 200,
1:00:21 PM:     force: false
1:00:21 PM:   },
1:00:21 PM:   {
1:00:21 PM:     from: '/',
1:00:21 PM:     to: '/.netlify/functions/___netlify-handler',
1:00:21 PM:     status: 200,
1:00:21 PM:     force: false
1:00:21 PM:   },
1:00:21 PM:   {
1:00:21 PM:     from: '/*',
1:00:21 PM:     to: '/.netlify/functions/___netlify-handler',
1:00:21 PM:     status: 200
1:00:21 PM:   }
1:00:21 PM: ].
1:00:21 PM: ​
1:00:21 PM: (@netlify/plugin-nextjs onBuild completed in 58ms)
1:00:21 PM: ​
1:00:21 PM: ────────────────────────────────────────────────────────────────
1:00:21 PM:   4. Functions bundling                                         
1:00:21 PM: ────────────────────────────────────────────────────────────────
1:00:21 PM: ​
1:00:21 PM: Packaging Functions from .netlify/functions-internal directory:
1:00:21 PM:  - ___netlify-handler/___netlify-handler.js
1:00:21 PM:  - ___netlify-odb-handler/___netlify-odb-handler.js
1:00:21 PM:  - _ipx/_ipx.js
1:00:21 PM: ​
1:00:31 PM: ​
1:00:31 PM: (Functions bundling completed in 10.5s)
1:00:31 PM: ​
1:00:31 PM: ────────────────────────────────────────────────────────────────
1:00:31 PM:   5. @netlify/plugin-nextjs (onPostBuild event)                 
1:00:31 PM: ────────────────────────────────────────────────────────────────
1:00:31 PM: ​
1:00:32 PM: Next.js cache saved.
1:00:32 PM: Creating deploy upload records
1:00:32 PM: ​
1:00:32 PM: (@netlify/plugin-nextjs onPostBuild completed in 71ms)
1:00:32 PM: ​
1:00:32 PM: ────────────────────────────────────────────────────────────────
1:00:32 PM:   6. Deploy site                                                
1:00:32 PM: ────────────────────────────────────────────────────────────────
1:00:32 PM: ​
1:00:32 PM: Starting to deploy site from '.next'
1:00:32 PM: Creating deploy tree 
1:00:32 PM: 19 new files to upload
1:00:32 PM: 2 new functions to upload
1:00:39 PM: Site deploy was successfully initiated
1:00:39 PM: ​
1:00:39 PM: (Deploy site completed in 7.6s)
1:00:39 PM: ​
1:00:39 PM: ────────────────────────────────────────────────────────────────
1:00:39 PM:   Netlify Build Complete                                        
1:00:39 PM: Starting post processing
1:00:39 PM: ────────────────────────────────────────────────────────────────
1:00:39 PM: ​
1:00:39 PM: (Netlify Build completed in 27.5s)
1:00:40 PM: Caching artifacts
1:00:40 PM: Started saving node modules
1:00:40 PM: Finished saving node modules
1:00:40 PM: Started saving build plugins
1:00:40 PM: Finished saving build plugins
1:00:40 PM: Started saving pip cache
1:00:40 PM: Finished saving pip cache
1:00:40 PM: Started saving emacs cask dependencies
1:00:40 PM: Post processing - HTML
1:00:40 PM: Finished saving emacs cask dependencies
1:00:40 PM: Started saving maven dependencies
1:00:40 PM: Finished saving maven dependencies
1:00:40 PM: Started saving boot dependencies
1:00:40 PM: Finished saving boot dependencies
1:00:40 PM: Started saving rust rustup cache
1:00:40 PM: Finished saving rust rustup cache
1:00:40 PM: Started saving go dependencies
1:00:40 PM: Finished saving go dependencies
1:00:40 PM: Build script success
1:00:41 PM: Post processing - header rules
1:00:41 PM: Post processing - redirect rules
1:00:41 PM: Post processing done
1:00:44 PM: Site is live ✨
1:01:04 PM: Finished processing build request in 1m12.294438755s
4

Sorry @hillary realized there was a better way to share that: Netlify App

5

Based on the docs here:

Defaults to the value of media_folder , with an opening / if one is not already included.

I’d say it should automatically work. If not, it could be a bug. How about you file it on the CMS repo?