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!