use currentSrc

suryatmodulus · Nov 23, 2021 · a381764 · a381764
1 parent 6f35bc7
commit a381764
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/lib/html-to-figma/helpers/image.ts b/lib/html-to-figma/helpers/image.ts
@@ -31,7 +31,9 @@ export const getImagePaintWithUrl = ({
     };
 
     if (el instanceof HTMLImageElement) {
-      const url = el.src;
+      // we use `currentSrc` instead of `src` as that will be the accurate value in dynamic contexts:
+      // when the img is a child of a picture element, or it has `sizes`/`srcSet` attributes, etc.
+      const url = el.currentSrc;
       if (url) {
         return {
           url,

diff --git a/lib/html-to-figma/index.ts b/lib/html-to-figma/index.ts
@@ -58,7 +58,13 @@ const getLayersForElement = (el: Element) => {
     return [];
   }
 
-  if (el.parentElement instanceof HTMLPictureElement) {
+  // for `picture`, we only need the `image` element. We can ignore the parent `picture` and
+  // `source` sibling elements.
+  if (
+    (el.parentElement instanceof HTMLPictureElement &&
+      el instanceof HTMLSourceElement) ||
+    el instanceof HTMLPictureElement
+  ) {
     return [];
   }
 
@@ -70,7 +76,6 @@ const getLayersForElement = (el: Element) => {
   if (
     (size(appliedStyles) ||
       el instanceof HTMLImageElement ||
-      el instanceof HTMLPictureElement ||
       el instanceof HTMLVideoElement) &&
     computedStyle.display !== "none"
   ) {