remoteintech/remote-jobs · warning

Image not found: ${src}

Error message

Image not found: ${src}

What it means

Source-missing guard in the Eleventy image shortcode at src/_config/shortcodes/image.js:30-34. The shortcode first prepends `./src` to src unless it already starts with that string (line 26-28), then calls fs.existsSync. If the resolved path is missing it console.warns `Image not found: <src>` and returns an empty string so the build continues, but the page renders without the picture. Note the prefix logic is literal concatenation, so a src like 'assets/foo.png' (no leading slash) becomes './srcassets/foo.png' and fails.

Source

Thrown at src/_config/shortcodes/image.js:32

export const imageShortcode = async (
  src,
  alt = '',
  caption = '',
  loading = 'lazy',
  containerClass,
  imageClass,
  widths = [650, 960, 1400],
  sizes = 'auto',
  formats = ['avif', 'webp', 'jpeg']
) => {
  // Prepend "./src" if not present
  if (!src.startsWith('./src')) {
    src = `./src${src}`;
  }

  // Check if file exists
  if (!fs.existsSync(src)) {
    console.warn(`Image not found: ${src}`);
    return '';
  }

  const metadata = await Image(src, {
    widths: [...widths],
    formats: [...formats],
    urlPath: '/assets/images/',
    outputDir: './dist/assets/images/',
    filenameFormat: (id, src, width, format, options) => {
      const extension = path.extname(src);
      const name = path.basename(src, extension);
      return `${name}-${width}w.${format}`;
    }
  });

  const lowsrc = metadata.jpeg[metadata.jpeg.length - 1];

  const imageSources = Object.values(metadata)

View on GitHub (pinned to b1dd8deb19)

Solutions

1. Confirm the resolved path (after the `./src` prefix) actually exists with `ls`.
2. Commit the missing image asset to the repo under src/.
3. Pass src with a leading slash (e.g. `/assets/images/foo.png`) so the prefix concatenation yields a valid path.
4. Run eleventy from the repository root so the relative `./src` base resolves correctly.

Example fix

{# before: image lives at /assets/images/team.png but src has no leading slash #}
{% image "assets/images/team.png", "Team photo" %}
{# after #}
{% image "/assets/images/team.png", "Team photo" %}

import { existsSync } from 'node:fs';
function resolveImgSrc(src) {
  return src.startsWith('./src') ? src : `./src${src}`;
}
function imageExists(src) {
  return existsSync(resolveImgSrc(src));
}

function isResolvableImage(src) {
  return typeof src === 'string' && existsSync(src.startsWith('./src') ? src : `./src${src}`);
}

When it happens

Trigger: A template/blog post references an image that was never committed under src/; the src argument lacks a leading slash so `./src` + path concatenates wrong; the file was moved/deleted but the template wasn't updated; case mismatch on a case-sensitive FS; eleventy invoked from a non-root cwd so the `./src` resolution misses.

Common situations: Blog post references an uploaded image that lives only in the author's working tree; image directory restructured; contributor passes a path relative to the template file rather than to src/.

Related errors

• Could not read file: ${err.message}

AI-assisted analysis of remoteintech/remote-jobs@b1dd8deb19 (2026-08-13). Data as JSON: /api/errors/0667588c942c58f0. Report an issue: GitHub.