Image component in New NFT Created preview

iggy-social · Jun 3, 2024 · 25b267d · 25b267d
1 parent c990dc4
commit 25b267d
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 6 deletions.
diff --git a/components/chat/ChatPost.vue b/components/chat/ChatPost.vue
@@ -71,7 +71,7 @@
 							:to="'/nft/collection?id=' + collection.address"
 							class="text-decoration-none text-reset"
 						>
-							<img :src="collection?.image" class="card-img-top preview-card-img" />
+							<Image :url="collection?.image" :alt="collection?.name" cls="card-img-top preview-card-img" />
 
 							<div
 								class="card-body bg-body rounded-bottom-3 border-end border-bottom border-start preview-card-body"
@@ -240,6 +240,7 @@ import sanitizeHtml from 'sanitize-html'
 import { useEthers, shortenAddress } from '~/store/ethers'
 import { useToast } from 'vue-toastification/dist/index.mjs'
 import { useUserStore } from '~/store/user'
+import Image from '~/components/Image.vue'
 import ProfileImage from '~/components/profile/ProfileImage.vue'
 import IggyPostMint from '~/components/minted-posts/IggyPostMint.vue'
 import MintedPostImage from '~/components/minted-posts/MintedPostImage.vue'
@@ -264,6 +265,7 @@ export default {
 	components: {
 		ChatQuote,
 		IggyPostMint,
+		Image,
 		MintedPostImage,
 		ProfileImage,
 	},

diff --git a/components/nft/collection/AddImageToCollectionModal.vue b/components/nft/collection/AddImageToCollectionModal.vue
@@ -47,7 +47,7 @@
 							/>
 							<br />
 							<small
-								>If image didn't appear above, then something is wrong with the link you added (wait until the loading indicator completes).</small
+								>If image didn't appear above, then something is wrong with the link you added (wait until the loading indicator completes). If you have an IPFS link, it also helps to cut/paste the same link a couple of times.</small
 							>
 						</div>
 					</div>

diff --git a/components/nft/collection/ChangeCollectionPreviewModal.vue b/components/nft/collection/ChangeCollectionPreviewModal.vue
@@ -44,7 +44,7 @@
 							<Image :url="imageUrl" cls="img-thumbnail img-fluid" style="max-width: 100px" />
 							<br />
 							<small
-								>If image didn't appear above, then something is wrong with the link you added (wait until the loading indicator completes).</small
+								>If image didn't appear above, then something is wrong with the link you added (wait until the loading indicator completes). If you have an IPFS link, it also helps to cut/paste the same link a couple of times.</small
 							>
 						</div>
 					</div>

diff --git a/pages/nft/collection.vue b/pages/nft/collection.vue
@@ -100,8 +100,8 @@
 
 				<div class="col-md-7">
 					<!--
-          <h3 class="mb-3">Collection: {{ cName }}</h3>
-          -->
+					<h3 class="mb-3">Collection: {{ cName }}</h3>
+					-->
 
 					<!-- Data -->
 					<div class="mt-1 mb-4 muted-text" style="font-size: 14px">

diff --git a/pages/nft/create.vue b/pages/nft/create.vue
@@ -94,7 +94,7 @@
 			<div v-if="cImage" class="mb-4">
 				<Image :url="cImage" alt="Image" cls="img-thumbnail img-fluid" style="max-width: 100px" />
 				<br />
-				<small>If image didn't appear above, then something is wrong with the link you added (wait until the loading indicator completes).</small>
+				<small>If image didn't appear above, then something is wrong with the link you added (wait until the loading indicator completes). If you have an IPFS link, it also helps to cut/paste the same link a couple of times.</small>
 			</div>
 
 			<!-- Description -->
-Original file line number
+Diff line change
@@ Expand Up / @@ -47,7 +47,7 @@ @@
     							/>
     							<br />
     							<small
-    								>If image didn't appear above, then something is wrong with the link you added (wait until the loading indicator completes).</small
+    								>If image didn't appear above, then something is wrong with the link you added (wait until the loading indicator completes). If you have an IPFS link, it also helps to cut/paste the same link a couple of times.</small
     							>
     						</div>
     					</div>
@@ Expand Down @@