Merge pull request #29 from liamfiddler/sharp-relative-files

Sharp relative files

Author: liamfiddler

.eleventy.js

@@ -111,7 +111,7 @@ const getImageData = async (imageSrc) => {
 };
 
 // Adds the attributes to the image element
-const processImage = async (imgElem, outputPath) => {
+const processImage = async (imgElem, options) => {
   const {
     transformImgPath,
     className,
@@ -123,7 +123,7 @@ const processImage = async (imgElem, outputPath) => {
     return;
   }
 
-  const imgPath = transformImgPath(imgElem.src, outputPath);
+  const imgPath = transformImgPath(imgElem.src, options);
   const parsedUrl = url.parse(imgPath);
   let fileExt = path.extname(parsedUrl.pathname).substr(1);
 
@@ -175,7 +175,7 @@ const processImage = async (imgElem, outputPath) => {
       imgElem.setAttribute('width', Math.round(ratioWidth));
     }
   } catch (e) {
-    console.error('LazyImages', imgPath, e);
+    logMessage(`${e.message}: ${imgPath}`);
   }
 };
 
@@ -195,7 +195,7 @@ const transformMarkup = async (rawContent, outputPath) => {
 
     if (images.length > 0) {
       logMessage(`found ${images.length} images in ${outputPath}`);
-      await Promise.all(images.map((image) => processImage(image, outputPath)));
+      await Promise.all(images.map((image) => processImage(image, { outputPath })));
       logMessage(`processed ${images.length} images in ${outputPath}`);
 
       if (appendInitScript) {
@@ -222,11 +222,10 @@ const transformMarkup = async (rawContent, outputPath) => {
 module.exports = {
   initArguments: {},
   configFunction: (eleventyConfig, pluginOptions = {}) => {
-    lazyImagesConfig = Object.assign(
-      {},
-      defaultLazyImagesConfig,
-      pluginOptions
-    );
+    lazyImagesConfig = {
+      ...defaultLazyImagesConfig,
+      ...pluginOptions,
+    };
 
     checkConfig(lazyImagesConfig, defaultLazyImagesConfig);
     cache.load(lazyImagesConfig.cacheFile);

helpers.js

@@ -1,5 +1,21 @@
 // Ensures relative paths start in the project root
-exports.transformImgPath = (src) => {
+exports.transformImgPath = (src, options = {}) => {
+  if (
+    src.startsWith('./') ||
+    src.startsWith('../') ||
+    (!src.startsWith('/') &&
+      !src.startsWith('http://') &&
+      !src.startsWith('https://') &&
+      !src.startsWith('data:'))
+  ) {
+    // The file path is relative to the output document
+    const { outputPath, inputPath } = options;
+    const outputDir = outputPath.substring(0, outputPath.lastIndexOf('/') + 1);
+    const imgPath = outputDir + src;
+    // TODO: Finish this when https://github.com/11ty/eleventy/issues/789 is resolved
+  }
+
+  // Reference files from the root project directory
   if (src.startsWith('/') && !src.startsWith('//')) {
     return `.${src}`;
   }