Merge pull request #148 from niklv/feature/base64_preview

antoine92190 · web-flow · commit 80a10ec45785 · 2021-03-12T09:35:43.000+01:00
Add preview image while loading main
diff --git a/README.md b/README.md
@@ -472,7 +472,8 @@ messages="[
       type: 'png',
       audio: true,
       duration: 14.4,
-      url: 'https://firebasestorage.googleapis.com/...'
+      url: 'https://firebasestorage.googleapis.com/...',
+      preview: 'data:image/png;base64,iVBORw0KGgoAA...'
     },
     reactions: {
       wink: [
diff --git a/src/ChatWindow/Message/MessageImage.vue b/src/ChatWindow/Message/MessageImage.vue
@@ -11,7 +11,7 @@
 					isImageLoading && message.senderId === currentUserId
 			}"
 			:style="{
-				'background-image': `url('${message.file.url}')`,
+				'background-image': `url('${isImageLoading ? message.file.preview || message.file.url : message.file.url}')`,
 				'max-height': `${imageResponsive.maxHeight}px`
 			}"
 		>

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`isImageLoading && message.senderId === currentUserId`
`12`	`12`	`}"`
`13`	`13`	`:style="{`
`14`		- 'background-image': `url('${message.file.url}')`,
	`14`	+ 'background-image': `url('${isImageLoading ? message.file.preview \|\| message.file.url : message.file.url}')`,
`15`	`15`	'max-height': `${imageResponsive.maxHeight}px`
`16`	`16`	`}"`
`17`	`17`	`>`