Request to use relative paths

[michaelmannucci]

I have followed the tutorial here, but it isn't doing anything at all. And no errors.

Here is my .eleventy.js:

const yaml = require("js-yaml")
const eleventyWebcPlugin = require("@11ty/eleventy-plugin-webc");
const { eleventyImagePlugin } = require("@11ty/eleventy-img");

module.exports = function (eleventyConfig) {
  // Current year
  eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`)

  // To Support .yaml Extension in _data
  // You may remove this if you can use JSON
  eleventyConfig.addDataExtension("yaml", (contents) => yaml.load(contents))

  // Copy node_modules files to /_Site
  eleventyConfig.addPassthroughCopy({
    "./node_modules/alpinejs/dist/cdn.min.js": "./js/alpine.js",
    "./node_modules/@alpinejs/focus/dist/cdn.min.js": "./js/alpine-focus.js",
    "./node_modules/lottie-web/build/player/lottie.min.js": "./js/lottie.js",
  });

  // Copy hamburger.json to /_Site
  eleventyConfig.addPassthroughCopy({
    "./src/hamburger.json": "./hamburger.json",
  });

  // WebC
  eleventyConfig.addPlugin(eleventyWebcPlugin, {
    components: [
      // Add as a global WebC component
      "npm:@11ty/eleventy-img/*.webc",
    ]
  });

  // Image plugin
  eleventyConfig.addPlugin(eleventyImagePlugin, {
    formats: ["webp", "jpeg"],
    urlPath: "/img/",
    outputDir: "_site/img/",
    defaultAttributes: {
      loading: "lazy",
      decoding: "async"
    }
  });

  // Transform HTML as njk
  return {
    dir: {
      input: "src",
    },
    htmlTemplateEngine: "njk",
  }
}

Here is the tag I am using:

<eleventy-image src="hero.jpg" alt=""></eleventy-image>1

hero.jpg exists at .src/img/hero.jpg.

Here is my package.json:

{
    "scripts": {
        "start": "npm-run-all -p dev:*",
        "build": "run-s build:*",
        "dev:11ty": "eleventy --serve",
        "dev:css": "tailwindcss -i src/css/tailwind.css -o _site/css/styles.css --watch --postcss",
        "build:11ty": "eleventy",
        "build:css": "tailwindcss -i src/css/tailwind.css -o _site/css/styles.css --postcss"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@11ty/eleventy": "^2.0.1",
        "@11ty/eleventy-img": "^3.1.0",
        "@11ty/eleventy-plugin-webc": "^0.11.1",
        "@alpinejs/focus": "^3.12.2",
        "alpinejs": "^3.12.2",
        "autoprefixer": "^10.4.14",
        "cssnano": "^6.0.1",
        "js-yaml": "^4.1.0",
        "lottie-web": "^5.12.0",
        "npm-run-all": "^4.1.5",
        "postcss": "^8.4.24",
        "postcss-cli": "^10.1.0",
        "tailwindcss": "^3.3.2"
    }
}

The site builds but puts nothing in _site/img/. Inspecting the HTML on my live site, it's outputting the tag exactly as I have it in src: <eleventy-image src="hero.jpg" alt=""></eleventy-image>

Any ideas what I am doing wrong?

[sygint]

I feel like I experienced this issue as well. I'd try using your full project root src/img/hero.jpg. I'm using this plugin extensively and this is how all my URLs are structured and it works fine.

[ivanahcosta]

As sygint mentioned you need to provide the image's full path as the src value's, in your case it needs to be:

But since you said it's not printing any errors and it outputs the same tag as in the source file I guess it's not being parsed correctly. Are you calling the eleventy-image tag in a .webc file? If not, you'll probably need to wrap the eleventy-image tag with the Render plugin: https://www.11ty.dev/docs/languages/webc/#use-the-render-plugin or change the htmlTemplateEngine to 'webc': https://www.11ty.dev/docs/languages/webc/#pre-process-html-input-as-webc.

[bronze]

full path worked for me. is there any way of setting it to relative paths?

[sygint]

full path worked for me. is there any way of setting it to relative paths?

I, too, woud love to use relative paths

[zachleat]

Related: #208 adds support for relative paths in the Eleventy Transform. More to come here!

[urob]

Agreed, it would be nice if the src attribute could be specified relative to the input directory so that renaming or moving the input directory does not require editing all image tags. E.g. with input = src,

<!-- Specify image src relative to the input directory -->
<img webc:is="eleventy-image" src="/img/something.jpg" ...>