Merge branch 'master' of https://github.com/surveyjs/survey-library

surveyjs · May 23, 2023 · 1300e28 · 1300e28
2 parents a7e7394 + d61c15c
commit 1300e28
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 7 deletions.
diff --git a/packages/survey-angular-ui/src/questions/image.component.html b/packages/survey-angular-ui/src/questions/image.component.html
@@ -1,6 +1,7 @@
 <div [class]="model.cssClasses.root" #contentElement>
   <img
     *ngIf="model.renderedMode === 'image'"
+    [visible]="!!model.locImageLink.renderedHtml && !model.contentNotLoaded"
     [class]="model.getImageCss()"
     [attr.src]="model.locImageLink.renderedHtml"
     [attr.alt]="model.altText || model.title"
@@ -12,6 +13,7 @@
   /><video
     controls
     *ngIf="model.renderedMode === 'video'"
+    [visible]="!!model.locImageLink.renderedHtml && !model.contentNotLoaded"
     [class]="model.getImageCss()"
     [attr.src]="model.locImageLink.renderedHtml"
     [attr.width]="model.renderedWidth"

diff --git a/src/defaultV2-theme/blocks/sd-image.scss b/src/defaultV2-theme/blocks/sd-image.scss
@@ -13,11 +13,10 @@
 .sd-image__no-image {
   background: $background-dim-light;
   min-width: calcSize(5);
-  min-height: calcSize(5);
+  min-height: calcSize(27.5);
   width: 100%;
   height: 100%;
-  position: absolute;
-  inset-block-start: 0;
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/src/knockout/templates/question-image.html b/src/knockout/templates/question-image.html
@@ -1,10 +1,10 @@
 <script type="text/html" id="survey-question-image">
   <div data-bind="css: question.koCss().root">
     <!-- ko if: question.renderedMode === "image" -->
-    <img data-bind="event: { load: question.onLoadHandler, error: question.onErrorHandler }, css: question.getImageCss(), attr: { src: $data.locImageLink.koRenderedHtml() || null, width: question.renderedWidth, height: question.renderedHeight, alt: question.altText || question.title }, style: { objectFit: question.imageFit }"/>
+    <img data-bind="event: { load: question.onLoadHandler, error: question.onErrorHandler }, css: question.getImageCss(), attr: { src: $data.locImageLink.koRenderedHtml() || null, width: question.renderedWidth, height: question.renderedHeight, alt: question.altText || question.title }, style: { objectFit: question.imageFit }, visible: $data.locImageLink.koRenderedHtml() && !question.contentNotLoaded"/>
     <!-- /ko -->
     <!-- ko if: question.renderedMode === "video" -->
-    <video controls data-bind="event: { load: question.onLoadHandler, error: question.onErrorHandler }, css: question.getImageCss(), attr: { src: $data.locImageLink.koRenderedHtml(), width: question.renderedWidth, height: question.renderedHeight }, style: { objectFit: question.imageFit }"></video>
+    <video controls data-bind="event: { load: question.onLoadHandler, error: question.onErrorHandler }, css: question.getImageCss(), attr: { src: $data.locImageLink.koRenderedHtml(), width: question.renderedWidth, height: question.renderedHeight }, style: { objectFit: question.imageFit }, visible: $data.locImageLink.koRenderedHtml() && !question.contentNotLoaded"></video>
     <!-- /ko -->
     <!-- ko if: question.renderedMode === "youtube" -->
     <iframe data-bind=" css: question.getImageCss(), attr: { src: $data.locImageLink.koRenderedHtml(), width: question.renderedWidth, height: question.renderedHeight }, style: { objectFit: question.imageFit }"></iframe>

diff --git a/src/react/image.tsx b/src/react/image.tsx
@@ -26,6 +26,9 @@ export class SurveyQuestionImage extends SurveyQuestionElementBase {
   protected renderElement(): JSX.Element {
     var cssClasses = this.question.getImageCss();
     var style: any = { objectFit: this.question.imageFit };
+    if(!this.question.imageLink || this.question.contentNotLoaded) {
+      style["display"] = "none";
+    }
     var control: JSX.Element | null = null;
     if (this.question.renderedMode === "image") {
       control = (

diff --git a/src/vue/image.vue b/src/vue/image.vue
@@ -2,6 +2,7 @@
   <div :class="question.cssClasses.root">
     <img
       v-if="question.renderedMode === 'image'"
+      v-show="question.imageLink && !question.contentNotLoaded"
       :class="question.getImageCss()"
       :src="question.locImageLink.renderedHtml"
       :alt="question.altText || question.title"
@@ -13,6 +14,7 @@
     /><video
       controls
       v-if="question.renderedMode === 'video'"
+      v-show="question.imageLink && !question.contentNotLoaded"
       :class="question.getImageCss()"
       :src="question.locImageLink.renderedHtml"
       :width="question.renderedWidth"

diff --git a/tests/markup/etalon_image.ts b/tests/markup/etalon_image.ts
@@ -20,6 +20,20 @@ registerMarkupTest(
     snapshot: "image"
   }
 );
+registerMarkupTest(
+  {
+    name: "Test Image question empty",
+    json: {
+      questions: [
+        {
+          "type": "image",
+          "name": "banner",
+        }
+      ]
+    },
+    snapshot: "image-empty"
+  }
+);
 registerMarkupTest(
   {
     name: "Test Image Video question markup",
@@ -55,7 +69,8 @@ registerMarkupTest(
     },
     timeout: 500,
     initSurvey: survey => {
-      survey.getAllQuestions()[0]["onErrorHandler"] = function() { this["contentNotLoaded"] = false; };
+      survey.getAllQuestions()[0]["contentNotLoaded"] = true;
+      survey.getAllQuestions()[0]["onErrorHandler"] = function() { this["contentNotLoaded"] = true; };
     },
     snapshot: "image-not-load-content"
   }

diff --git a/tests/markup/helper.ts b/tests/markup/helper.ts
@@ -289,6 +289,9 @@ function clearAttributes(el: Element, removeIds = false) {
   if(el.getAttribute("style") === "") {
     el.removeAttribute("style");
   }
+  if(el.getAttribute("src") === "") {
+    el.removeAttribute("src");
+  }
   if(el.getAttribute("name") !== "name")
     el.removeAttribute("name");
   if((<any>el).checked) {

diff --git a/tests/markup/snapshots/image-empty.snap.html b/tests/markup/snapshots/image-empty.snap.html
@@ -0,0 +1,9 @@
+<div class="sv_q_image">
+	<img alt="banner" class="sv_image_image" height="150px" style="display:none; object-fit:contain;" width="200px">
+		<div class="sv-image__no-image">
+			<svg class="sv-svg-icon" role="img" style="height:48px; width:48px;">
+				<use xlink:href="#icon-no-image" class="">
+				</use>
+			</svg>
+		</div>
+	</div>
diff --git a/tests/markup/snapshots/image-not-load-content.snap.html b/tests/markup/snapshots/image-not-load-content.snap.html
@@ -1,3 +1,9 @@
 <div class="sv_q_image">
-	<img alt="banner" class="sv_image_image" height="150px" src="#item1.jpg" style="object-fit: contain;" width="200px">
+	<img alt="banner" class="sv_image_image" height="150px" src="#item1.jpg" style="display:none; object-fit:contain;" width="200px">
+		<div class="sv-image__no-image">
+			<svg class="sv-svg-icon" role="img" style="height:48px; width:48px;">
+				<use xlink:href="#icon-no-image" class="">
+				</use>
+			</svg>
+		</div>
 	</div>
diff --git a/visualRegressionTests/tests/defaultV2/etalons/image-not-load.png b/visualRegressionTests/tests/defaultV2/etalons/image-not-load.png