Add @astrojs/image to the project

.eslintrc.json

@@ -56,10 +56,13 @@
       "globals": {
         "astroHTML": true
       },
-      "extends": ["airbnb/base", "airbnb-typescript/base", "plugin:astro/all"],
+      "extends": ["airbnb/base", "airbnb-typescript/base", "plugin:astro/all", "plugin:astro/jsx-a11y-strict"],
       "parser": "astro-eslint-parser",
       "parserOptions": {
         "parser": "@typescript-eslint/parser"
+      },
+      "rules": {
+        "astro/jsx-a11y/alt-text": [2, { "img": ["Image", "Picture"] }]
       }
     },
     {

astro.config.ts

@@ -1,10 +1,11 @@
+import image from '@astrojs/image';
 import react from '@astrojs/react';
 import tailwind from '@astrojs/tailwind';
 import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [react(), tailwind()],
+  integrations: [react(), tailwind(), image()],
   vite: {
     ssr: {
       external: ['svgo'],

package.json

@@ -14,6 +14,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "@astrojs/image": "0.3.6",
     "astro-icon": "0.7.3",
     "clsx": "1.2.1",
     "prettier-plugin-astro": "0.5.3",

src/components/sections/main-section.astro

@@ -1,8 +1,11 @@
 ---
+import { Image } from '@astrojs/image/components';
+
 import SectionCard from '@/atoms/section-card.astro';
 import type { MainSection } from '@/types/main-section';
 
 export interface Props extends MainSection {}
+const { image } = Astro.props;
 ---
 
-<SectionCard>Main section</SectionCard>
+<SectionCard>Main section <Image src={image.src} alt={image.alt} width={200} height={200} format="webp" /></SectionCard>

src/data.ts

@@ -1,4 +1,3 @@
-import myImage from '@/assets/my-image.jpeg';
 import type { Data } from '@/types/data';
 
 const data: Data = {
@@ -11,7 +10,7 @@ const data: Data = {
     config: {
       icon: 'fa6-solid:user',
     },
-    image: { src: myImage, alt: 'Mark Freeman picture' },
+    image: { src: import('@/assets/my-image.jpeg'), alt: 'Mark Freeman picture' },
     fullName: 'Mark Freeman',
     role: 'Senior React Developer',
     details: [

src/env.d.ts

@@ -1 +1 @@
-/// <reference types="astro/client" />
+/// <reference types="@astrojs/image/client" />

src/types/common.ts

@@ -1,7 +1,9 @@
+import type { ImageMetadata } from '@astrojs/image';
+
 export type Icon = string;
 
 export type LocalImage = {
-  src: string;
+  src: Promise<{ default: ImageMetadata }>;
   alt: string;
 };