Issue-1075 v-image ssr bug (#1076)

* fix bug * imp doc * up --------- Co-authored-by: Aleksandr Bunin <[email protected]>
V4Fire · Jan 16, 2024 · db731d4 · db731d4
1 parent 9dfa85e
commit db731d4
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,12 @@ Changelog
 
 _Note: Gaps between patch versions are faulty, broken or test releases._
 
+## v4.0.0-beta.47 (2024-01-16)
+
+#### :bug: Bug Fix
+
+* Fixed incorrect image state during hydration `components/directives/image`
+
 ## v4.0.0-beta.46 (2024-01-11)
 
 #### :bug: Bug Fix

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "packageManager": "[email protected]",
   "typings": "index.d.ts",
   "license": "MIT",
-  "version": "4.0.0-beta.46",
+  "version": "4.0.0-beta.47",
   "author": {
     "name": "kobezzza",
     "email": "[email protected]",

diff --git a/src/components/directives/image/CHANGELOG.md b/src/components/directives/image/CHANGELOG.md
@@ -9,6 +9,12 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v4.?.? (2024-01-??)
+
+#### :bug: Bug Fix
+
+* Fixed incorrect image state during hydration
+
 ## v4.0.0-alpha.1 (2022-12-14)
 
 #### :boom: Breaking Change

diff --git a/src/components/directives/image/helpers.ts b/src/components/directives/image/helpers.ts
@@ -69,7 +69,6 @@ export function createImgElement(
 		onerror(e: Event) {
 			const img = (<HTMLImageElement>e.target);
 			img.setAttribute('data-img', 'failed');
-			img.style.opacity = '0';
 		},
 
 		style: {

diff --git a/src/components/directives/image/index.ts b/src/components/directives/image/index.ts
@@ -138,8 +138,27 @@ function mounted(el: HTMLElement, params: DirectiveParams, vnode: VNode): void {
 			break;
 
 		default:
+			handleDefaultCase();
+	}
+
+	function handleDefaultCase() {
+		if (img == null) {
+			return;
+		}
+
+		if (!img.complete) {
 			$a.once(img, 'load', onLoad, group);
 			$a.once(img, 'error', onError, group);
+
+			return;
+		}
+
+		if (img.naturalWidth > 0) {
+			void onLoad();
+
+		} else {
+			onError();
+		}
 	}
 
 	async function onLoad() {
@@ -152,7 +171,6 @@ function mounted(el: HTMLElement, params: DirectiveParams, vnode: VNode): void {
 		try {
 			await $a.sleep(50, group);
 
-			// eslint-disable-next-line require-atomic-updates
 			img.style.opacity = '1';
 
 			el.style['background-image'] = '';
@@ -172,6 +190,8 @@ function mounted(el: HTMLElement, params: DirectiveParams, vnode: VNode): void {
 			return;
 		}
 
+		img.style.opacity = '0';
+
 		el.style['background-image'] = el.getAttribute('data-broken-image') ?? '';
 		el.setAttribute('data-image', 'broken');