Add missing images

assets/scripts/components/pages/Artificialisation.tsx

@@ -3,6 +3,7 @@ import { useHtmlLoader } from '@hooks/useHtmlLoader';
 import useHighcharts from '@hooks/useHighcharts';
 import Loader from '@components/ui/Loader';
 import Guide from '@components/widgets/Guide';
+import OcsgeMatricePassage from '@images/ocsge_matrice_passage.png';
 
 /*
 Ce composant est un composant hybride qui permet de récupérer du contenu côté serveur via Django et de l'intégrer directement dans l'interface React.
@@ -62,7 +63,7 @@ const Artificialisation: React.FC<{ endpoint: string }> = ({ endpoint }) => {
                             <p class="fr-text--sm mb-3">La nomenclature précise que les surfaces dont les sols sont soit imperméabilisés en raison du bâti ou d'un revêtement, soit stabilisés et compactés, soit constitués de matériaux composites sont qualifiées de surfaces artificialisées. De même, les surfaces végétalisées herbacées (c'est-à-dire non ligneuses) et qui sont à usage résidentiel, de production secondaire ou tertiaire, ou d'infrastructures, sont considérées comme artificialisées, y compris lorsqu'elles sont en chantier ou à l'état d'abandon.</p>
                             <p class="fr-text--sm mb-3">L'artificialisation nette est définie comme « le solde de l'artificialisation et de la désartificialisation des sols constatées sur un périmètre et sur une période donnés » (article L.101-2-1 du code de l'urbanisme). </p>
                             <p class="fr-text--sm mb-3">Au niveau national, l'artificialisation est mesurée par l'occupation des sols à grande échelle (OCS GE), en cours d'élaboration, dont la production sera engagée sur l'ensemble du territoire national d'ici fin 2024.</p>
-                            <img src="https://mondiagartif.beta.gouv.fr/static/project/img/ocs_ge_matrice_passage.png" class="w-100" />
+                            <img src="${OcsgeMatricePassage}" alt="OCS GE Nomenclature Us" class="w-100" />
                         `}
                     />
                     <div dangerouslySetInnerHTML={{ __html: content }} />

assets/scripts/components/pages/Ocsge.tsx

@@ -3,6 +3,8 @@ import { useHtmlLoader } from '@hooks/useHtmlLoader';
 import useHighcharts from '@hooks/useHighcharts';
 import Loader from '@components/ui/Loader';
 import Guide from '@components/widgets/Guide';
+import OcsgeNomenclatureUs from '@images/ocsge-nomenclature-us.png';
+import OcsgeNomenclatureCs from '@images/ocsge-nomenclature-cs.png';
 
 /*
 Ce composant est un composant hybride qui permet de récupérer du contenu côté serveur via Django et de l'intégrer directement dans l'interface React.
@@ -46,6 +48,10 @@ const Ocsge: React.FC<{ endpoint: string }> = ({ endpoint }) => {
                             <p class="fr-text--sm mb-3">La couverture du sol est une vue « physionomique » du terrain. La description est une simple distinction des éléments structurant le paysage. Ex : Zones bâties.</p>
                             <p class="fr-text--sm mb-3">L'usage du sol est une vue « anthropique du sol ». Il est  partagé en fonction du rôle que jouent les portions de terrain en tant  qu'occupation humaine. Dans l'OCS GE, l'usage US235 regroupe les objets de US2  (production secondaire), US3 (production tertiaire) et US5 (usage  résidentiel) de la nomenclature nationale quand la distinction entre ces usages n'est pas possible ou pas connue. Ex : Agriculture.</p>
                             <p class="fr-text--sm mb-3">Chaque objet géographique de l'OCS GE porte ces deux informations. Ex : Zones bâties (couverture) et Agriculture (usage) décrivent des bâtiments agricoles.</p>
+                            <div class="d-flex">
+                                <img src="${OcsgeNomenclatureUs}" alt="OCS GE Nomenclature Us" class="w-100 fr-mr-2w" />
+                                <img src="${OcsgeNomenclatureCs}" alt="OCS GE Nomenclature Us" class="w-100" />
+                            </div>
                         `}
                     />
                     <div dangerouslySetInnerHTML={{ __html: content }} />

assets/types/declaration.d.ts

@@ -9,3 +9,18 @@ declare module '*.geojson' {
 }
 
 declare var _paq: any;
+
+declare module '*.png' {
+    const value: string;
+    export default value;
+}
+
+declare module '*.jpg' {
+    const value: string;
+    export default value;
+}
+
+declare module '*.jpeg' {
+    const value: string;
+    export default value;
+}