resolve #6233 After clear Image URL from property grid Question looks…

… with strange proportions
surveyjs · May 23, 2023 · 1443842 · 1443842
1 parent f12d5b3
commit 1443842
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 5 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"