Gif preview_url

commit_hash:29744c342df005fe17b40e9d7759ecd9e930d718

.mapping.json

@@ -19033,6 +19033,8 @@
   "client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/placeholder-color/firefoxMobile/placeholder-color.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/placeholder-color/firefoxMobile/placeholder-color.png",
   "client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/preview/chromeMobile/preview.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/preview/chromeMobile/preview.png",
   "client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/preview/firefoxMobile/preview.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/preview/firefoxMobile/preview.png",
+  "client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/preview_url/chromeMobile/preview_url.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/preview_url/chromeMobile/preview_url.png",
+  "client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/preview_url/firefoxMobile/preview_url.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/preview_url/firefoxMobile/preview_url.png",
   "client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/scale_fill/chromeMobile/scale_fill.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/scale_fill/chromeMobile/scale_fill.png",
   "client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/scale_fill/firefoxMobile/scale_fill.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/scale_fill/firefoxMobile/scale_fill.png",
   "client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/scale_fill_bottom/chromeMobile/scale_fill_bottom.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-gif-image/scale_fill_bottom/chromeMobile/scale_fill_bottom.png",

client/web/divkit/src/components/image/Image.svelte

@@ -90,6 +90,7 @@
     $: jsonWidth = componentContext.getDerivedFromVars(componentContext.json.width);
     $: jsonHeight = componentContext.getDerivedFromVars(componentContext.json.height);
     $: jsonPreview = componentContext.getDerivedFromVars(componentContext.json.preview);
+    $: jsonPreviewUrl = componentContext.getDerivedFromVars(componentContext.json.preview_url);
     $: jsonPlaceholderColor = componentContext.getDerivedFromVars(componentContext.json.placeholder_color);
     $: jsonScale = componentContext.getDerivedFromVars(componentContext.json.scale);
     $: jsonPosition = componentContext.getDerivedFromVars({
@@ -139,9 +140,10 @@
 
     $: {
         const preview = $jsonPreview;
+        const previewUrl = $jsonPreviewUrl;
 
-        if ((state === STATE_LOADING || state === STATE_ERROR || isEmpty) && preview) {
-            backgroundImage = `url("${prepareBase64(preview)}")`;
+        if ((state === STATE_LOADING || state === STATE_ERROR || isEmpty) && (preview || previewUrl)) {
+            backgroundImage = `url("${previewUrl ? previewUrl : prepareBase64(preview || '')}")`;
             highPrority = highPriorityPreview;
         } else {
             backgroundImage = '';

client/web/divkit/src/types/image.d.ts

@@ -22,6 +22,7 @@ export interface DivImageData extends DivBaseData, DivActionableData {
     content_alignment_horizontal?: AlignmentHorizontal;
     content_alignment_vertical?: AlignmentVertical;
     preview?: string;
+    preview_url?: string;
     preload_required?: BooleanInt;
     aspect?: DivAspect;
     high_priority_preview_show?: BooleanInt;

schema/div-gif-image.json

@@ -26,7 +26,8 @@
           "$ref": "common.json#/url",
           "$description": "translations.json#/div_gif_image_preview_url",
           "platforms": [
-            "android"
+            "android",
+            "web"
           ]
         }
       }

test_data/snapshot_test_data/div-gif-image/preview_url.json

@@ -1,7 +1,8 @@
 {
   "description": "Gif with preview url",
   "platforms": [
-    "android"
+    "android",
+    "web"
   ],
   "templates": {},
   "card": {
@@ -20,7 +21,7 @@
             "value": 240
           },
           "placeholder_color": "#f00",
-          "gif_url": "https://none",
+          "gif_url": "empty://",
           "preview_url": "https://yastatic.net/s3/home/yandex-app/div_demo/containers.png"
         }
       }