fix: update image handling in documentation for various explorers and use cases

Author: Le-Caignec

src/manage-data/dataProtector/dataProtectorCore/protectData.md

@@ -432,5 +432,10 @@ To further check your data was correctly created, you can inspect it on the
 [iExec explorer](https://explorer.iex.ec/).
 
 <a href="https://explorer.iex.ec/" target="_blank" rel="noreferrer" style="display: inline-block">
-  <img src="/assets/explorer-dataset-example.png" alt="iExec explorer - Dataset example">
+  <img :src="explorerDatasetImage" alt="iExec explorer - Dataset example">
 </a>
+
+<script setup>
+// Assets
+import explorerDatasetImage from '../../../assets/explorer-dataset-example.png';
+</script>

src/overview/tooling-and-explorers/blockchain-explorer.md

@@ -17,7 +17,7 @@ publicly auditable.
   <UseCaseCard
     title="🔷 Arbitrum One"
     description="Production network for mainnet operations with verified smart contracts and comprehensive transaction tracking."
-    image-url="/assets/tooling-&-explorers/blockchain-explorer/arbitrum-explorer.png"
+    :image-url="arbitrumExplorerImage"
     image-alt="Arbitrum Explorer"
     :features="['Verified Contracts', 'Transaction History', 'Token Tracking', 'Contract Interactions']"
     demo-url="https://arbiscan.io/"
@@ -28,7 +28,7 @@ publicly auditable.
   <UseCaseCard
     title="⚡ Bellecour"
     description="iExec's dedicated sidechain for optimized performance with native integration and enhanced protocol analytics."
-    image-url="/assets/tooling-&-explorers/blockchain-explorer/bellecour-explorer.png"
+    :image-url="bellecourExplorerImage"
     image-alt="Bellecour Explorer"
     :features="['Verified Contracts', 'Transaction History', 'Token Tracking', 'Contract Interactions']"
     demo-url="https://blockscout-bellecour.iex.ec/"
@@ -46,4 +46,8 @@ deploy to **Arbitrum** for production workloads.
 
 <script setup>
 import UseCaseCard from '../../components/UseCaseCard.vue';
+
+// Assets
+import arbitrumExplorerImage from '../../assets/tooling-&-explorers/blockchain-explorer/arbitrum-explorer.png';
+import bellecourExplorerImage from '../../assets/tooling-&-explorers/blockchain-explorer/bellecour-explorer.png';
 </script>

src/overview/tooling-and-explorers/builder-dashboard.md

@@ -14,7 +14,7 @@ streamlines your development workflow and provides deep insights on your
 confidential iApps deployed on the protocol.
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/builder-dashboard/builder-dashboard.png"
+  :image-url-dark="builderDashboardImage"
   image-alt="Builder Dashboard Overview"
   link-url="https://builder.iex.ec/"
   caption="🔗 Access the Builder Dashboard"
@@ -44,7 +44,7 @@ The first screen of the Builder Dashboard provides comprehensive voucher
 monitoring with detailed task execution history and real-time balance tracking.
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/builder-dashboard/build-voucher-view.png"
+  :image-url-dark="buildVoucherViewImage"
   image-alt="Voucher Consumption Dashboard"
   link-url="https://builder.iex.ec/vouchers"
   caption="🔗 Access Voucher Dashboard"
@@ -99,7 +99,7 @@ The second screen provides comprehensive management and analytics for your
 deployed confidential iApps with detailed statistics and user insights.
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/builder-dashboard/my-iapps-view.png"
+  :image-url-dark="myIappsViewImage"
   image-alt="My Confidential iApps Dashboard"
   link-url="https://builder.iex.ec/iapps"
   caption="🔗 Manage Your iApps"
@@ -162,4 +162,9 @@ import { Icon } from '@iconify/vue';
 import ImageViewer from '../../components/ImageViewer.vue';
 import FeatureCard from '../../components/FeatureCard.vue';
 import CardGrid from '../../components/CardGrid.vue';
+
+// Assets
+import builderDashboardImage from '../../assets/tooling-&-explorers/builder-dashboard/builder-dashboard.png';
+import buildVoucherViewImage from '../../assets/tooling-&-explorers/builder-dashboard/build-voucher-view.png';
+import myIappsViewImage from '../../assets/tooling-&-explorers/builder-dashboard/my-iapps-view.png';
 </script>

src/overview/tooling-and-explorers/iexec-explorer.md

@@ -12,7 +12,7 @@ decentralized computing protocol. Track deals, monitor task execution, and
 explore apps and protectedData—all in one powerful dashboard.
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/iexec-explorer/explorer-global.png"
+  :image-url-dark="explorerGlobalImage"
   image-alt="iExec Explorer"
   link-url="https://explorer.iex.ec/"
   caption="🔗 Explore the iExec Protocol"
@@ -70,7 +70,7 @@ explore apps and protectedData—all in one powerful dashboard.
 ## 💼 Deals & Tasks {#deals-tasks}
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/iexec-explorer/deal-view.png"
+  :image-url-dark="dealViewImage"
   image-alt="Deal View"
   link-url="https://explorer.iex.ec/bellecour/deals"
   caption="🔗 Explore Deals"
@@ -96,7 +96,7 @@ explore apps and protectedData—all in one powerful dashboard.
 ### Tasks Overview
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/iexec-explorer/task-view.png"
+  :image-url-dark="taskViewImage"
   image-alt="Task View"
   link-url="https://explorer.iex.ec/bellecour/tasks"
   caption="🔗 Explore Tasks"
@@ -112,14 +112,14 @@ Browse and analyze all tasks across the iExec network:
 ### Task Execution Monitoring
 
 <ImageViewer
-    image-url-dark="/assets/tooling-&-explorers/iexec-explorer/task-details-started.png"
+    :image-url-dark="taskDetailsStartedImage"
     image-alt="Result Decryption"
     link-url="https://explorer.iex.ec/bellecour/tasks"
     caption="🔗 Explore Tasks"
 />
 
 <ImageViewer
-    image-url-dark="/assets/tooling-&-explorers/iexec-explorer/task-details-completed.png"
+    :image-url-dark="taskDetailsCompletedImage"
     image-alt="Task Completed"
     link-url="https://explorer.iex.ec/bellecour/tasks"
     caption="🔗 Explore Tasks"
@@ -148,7 +148,7 @@ Browse and analyze all tasks across the iExec network:
 ## 📱 iApps Listing {#iapps-listing}
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/iexec-explorer/app-view.png"
+  :image-url-dark="appViewImage"
   image-alt="App View"
   link-url="https://explorer.iex.ec/bellecour/apps"
   caption="🔗 Explore iApps Marketplace"
@@ -163,7 +163,7 @@ Explore the iExec application marketplace:
 ## 🗄️ Protected Data Listing {#protected-data-listing}
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/iexec-explorer/dataset-view.png"
+  :image-url-dark="datasetViewImage"
   image-alt="Dataset View"
   link-url="https://explorer.iex.ec/bellecour/datasets"
   caption="🔗 Explore Protected Datasets"
@@ -180,7 +180,7 @@ Navigate the protected data landscape:
 ## ⚡ Workerpools {#workerpools}
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/iexec-explorer/workerpool-view.png"
+  :image-url-dark="workerpoolViewImage"
   image-alt="Workerpool View"
   link-url="https://explorer.iex.ec/bellecour/workerpools"
   caption="🔗 Explore Workerpools Infrastructure"
@@ -198,4 +198,14 @@ Explore the decentralized computing infrastructure:
 import ImageViewer from '../../components/ImageViewer.vue';
 import FeatureCard from '../../components/FeatureCard.vue';
 import CardGrid from '../../components/CardGrid.vue';
+
+// Assets
+import explorerGlobalImage from '../../assets/tooling-&-explorers/iexec-explorer/explorer-global.png';
+import dealViewImage from '../../assets/tooling-&-explorers/iexec-explorer/deal-view.png';
+import taskViewImage from '../../assets/tooling-&-explorers/iexec-explorer/task-view.png';
+import taskDetailsStartedImage from '../../assets/tooling-&-explorers/iexec-explorer/task-details-started.png';
+import taskDetailsCompletedImage from '../../assets/tooling-&-explorers/iexec-explorer/task-details-completed.png';
+import appViewImage from '../../assets/tooling-&-explorers/iexec-explorer/app-view.png';
+import datasetViewImage from '../../assets/tooling-&-explorers/iexec-explorer/dataset-view.png';
+import workerpoolViewImage from '../../assets/tooling-&-explorers/iexec-explorer/workerpool-view.png';
 </script>

src/overview/tooling-and-explorers/subgraph-explorer.md

@@ -13,7 +13,7 @@ tool allows developers and users to efficiently retrieve and analyze on-chain
 data through GraphQL queries.
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/the-graph/image-logo.jpg"
+  :image-url-dark="theGraphLogoImage"
   image-alt="The Graph Protocol"
   link-url="https://thegraph.com/docs/en/subgraphs/quick-start/"
 />
@@ -26,7 +26,7 @@ applications can query using GraphQL. This makes it easy to access blockchain
 data without having to run your own indexing infrastructure.
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/the-graph/protocol-view.jpg"
+  :image-url-dark="theGraphProtocolImage"
   image-alt="The Graph Protocol"
   link-url="https://thegraph.com/docs/en/subgraphs/quick-start/"
 />
@@ -50,7 +50,7 @@ protocol.
   <ProjectCard
     title="iExec PoCo - Arbitrum"
     description="Indexes Proof of Contribution (PoCo) data on Arbitrum mainnet, including apps, deals, tasks, and workerpools"
-    icon-image="/assets/icons/arbitrum.svg"
+    :icon-image="arbitrumIcon"
     status="available"
     status-label="Live"
     button-label="Explore Subgraph"
@@ -63,7 +63,7 @@ protocol.
   <ProjectCard
     title="iExec DataProtector - Arbitrum"
     description="Indexes DataProtector protocol data on Arbitrum mainnet, including protected data, access grants, and sharing mechanisms"
-    icon-image="/assets/icons/arbitrum.svg"
+    :icon-image="arbitrumIcon"
     status="available"
     status-label="Live"
     button-label="Explore Subgraph"
@@ -76,7 +76,7 @@ protocol.
 <ProjectCard
     title="iExec PoCo - Bellecour"
     description="Indexes Proof of Contribution (PoCo) data on Bellecour mainnet, including apps, deals, tasks, and workerpools"
-    icon-image="/assets/icons/iexec-logo.png"
+    :icon-image="iexecLogoIcon"
     status="available"
     status-label="Live"
     button-label="Explore Subgraph"
@@ -89,7 +89,7 @@ protocol.
 <ProjectCard
     title="iExec DataProtector - Bellecour"
     description="Indexes DataProtector protocol data on Bellecour mainnet, including protected data, access grants, and sharing mechanisms"
-    icon-image="/assets/icons/iexec-logo.png"
+    :icon-image="iexecLogoIcon"
     status="available"
     status-label="Live"
     button-label="Explore Subgraph"
@@ -108,7 +108,7 @@ test queries directly in your browser. This powerful interface makes it easy to
 explore the available data and construct complex queries.
 
 <ImageViewer
-  image-url-dark="/assets/tooling-&-explorers/the-graph/graphql-explorer.png"
+  :image-url-dark="graphqlExplorerImage"
   image-alt="GraphQL Explorer Interface"
   link-url="https://thegraph.com/explorer/subgraphs/Ep5zs5zVr4tDiVuQJepUu51e5eWYJpka624X4DMBxe3u?view=Query&chain=arbitrum-one"
 />
@@ -194,4 +194,11 @@ query {
 import ImageViewer from '../../components/ImageViewer.vue';
 import CardGrid from '../../components/CardGrid.vue';
 import ProjectCard from '../../components/ProjectCard.vue';
+
+// Assets
+import theGraphLogoImage from '../../assets/tooling-&-explorers/the-graph/image-logo.jpg';
+import theGraphProtocolImage from '../../assets/tooling-&-explorers/the-graph/protocol-view.jpg';
+import arbitrumIcon from '../../assets/icons/arbitrum.svg';
+import iexecLogoIcon from '../../assets/icons/iexec-logo.png';
+import graphqlExplorerImage from '../../assets/tooling-&-explorers/the-graph/graphql-explorer.png';
 </script>

src/overview/use-cases.md

@@ -8,7 +8,7 @@ computing and decentralized data protection.
   <UseCaseCard
     title="Content Creator"
     description="A comprehensive demo showcasing iExec's DataProtector Sharing module. Experience privacy-first data sharing where content creators can securely share their work while maintaining full control over access permissions and monetization."
-    imageUrl="/assets/use-cases/content-creator.png"
+    :imageUrl="contentCreatorImage"
     imageAlt="Content Creator Demo Screenshot"
     :features="['DataProtector Core', 'DataProtector Sharing']"
     demoUrl="https://demo.iex.ec/content-creator/"
@@ -19,7 +19,7 @@ computing and decentralized data protection.
 <UseCaseCard
     title="Web3 Messaging"
     description="Secure communication platform for Web3 users enabling privacy-preserving messaging through Web3Mail and Web3Telegram. Users maintain control over their data while enabling targeted communication and monetizing their engagement."
-    imageUrl="/assets/use-cases/web3-messaging.png"
+    :imageUrl="web3MessagingImage"
     imageAlt="Web3Messaging Demo Screenshot"
     :features="['DataProtector Core', 'Web3Mail', 'Web3Telegram']"
     demoUrl="https://demo.iex.ec/web3messaging"
@@ -30,7 +30,7 @@ computing and decentralized data protection.
 <UseCaseCard
     title="AI Agent"
     description="Showcase of artificial intelligence applications running on iExec's confidential computing infrastructure. Experience privacy-preserving AI inference, machine learning model execution, and secure data analysis with TEE protection."
-    imageUrl="/assets/use-cases/elizaos.png"
+    :imageUrl="elizaosImage"
     imageAlt="AI Applications Demo Screenshot"
     :features="['AI', 'TEE', 'Confidential Computing']"
     githubUrl="https://github.com/iExecBlockchainComputing/iexec-elizaos-agent"
@@ -41,4 +41,9 @@ computing and decentralized data protection.
 
 <script setup>
 import UseCaseCard from '../components/UseCaseCard.vue';
+
+// Assets
+import contentCreatorImage from '../assets/use-cases/content-creator.png';
+import web3MessagingImage from '../assets/use-cases/web3-messaging.png';
+import elizaosImage from '../assets/use-cases/elizaos.png';
 </script>

src/use-iapp/how-to-pay/how-to-pay-for-web3mail.md

@@ -24,7 +24,7 @@ and **xRLC**, detailing the steps for each method.
 ### Step 2: Use the Builder Dashboard
 
 <a href="https://builder.iex.ec/" target="_blank" rel="noreferrer" style="display: inline-block; margin-top: 20px">
-  <img src="/assets/tooling-&-explorers/builder-dashboard/builder-dashboard.png" alt="Builder dashboard screenshot">
+  <img :src="builderDashboardImage" alt="Builder dashboard screenshot">
 </a>
 
 The iExec Builder Dashboard is a comprehensive tool for managing vouchers and
@@ -151,3 +151,8 @@ Convert sRLC back to xRLC and withdraw to your wallet using:
 ```javascript
 iexec.account.withdraw(RLC_amount);
 ```
+
+<script setup>
+// Assets
+import builderDashboardImage from '../../assets/tooling-&-explorers/builder-dashboard/builder-dashboard.png';
+</script>

src/use-iapp/how-to-pay/how-to-pay-for-web3telegram.md

@@ -31,7 +31,7 @@ This guide explains how to pay for Web3Telegram's computing power using
 ### Step 2: Use the Builder Dashboard
 
 <a href="https://builder.iex.ec/" target="_blank" rel="noreferrer" style="display: inline-block; margin-top: 20px">
-  <img src="/assets/tooling-&-explorers/builder-dashboard/builder-dashboard.png" alt="Builder dashboard screenshot">
+  <img :src="builderDashboardImage" alt="Builder dashboard screenshot">
 </a>
 
 The iExec Builder Dashboard is a comprehensive tool for managing vouchers and
@@ -170,3 +170,8 @@ Convert sRLC back to xRLC and withdraw to your wallet using:
 ```javascript
 iexec.account.withdraw(RLC_amount);
 ```
+
+<script setup>
+// Assets
+import builderDashboardImage from '../../assets/tooling-&-explorers/builder-dashboard/builder-dashboard.png';
+</script>