diff --git a/CHANGELOG.md b/CHANGELOG.md
index 22a970724c..a6c784da35 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 - improvement: hide gender in member create/edit form if not required
 - Fix a bug: unable to update member's profile
+- Fix a bug: unable to show machine/training picture
 - updates translations
 
 ## v6.3.19 2024 Avril 9
diff --git a/app/frontend/src/javascript/filters/filters.js b/app/frontend/src/javascript/filters/filters.js
index 2935103667..ef6d620b93 100644
--- a/app/frontend/src/javascript/filters/filters.js
+++ b/app/frontend/src/javascript/filters/filters.js
@@ -367,3 +367,11 @@ Application.Filters.filter('currency', [function ($locale) {
       : new Intl.NumberFormat(Fablab.intl_locale, { style: 'currency', currency: Fablab.intl_currency }).format(amount);
   };
 }]);
+
+Application.Filters.filter('encodeURI', [function () {
+  return function (str) {
+    return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
+      return '%' + c.charCodeAt(0).toString(16);
+    });
+  };
+}]);
diff --git a/app/frontend/templates/home/projects.html b/app/frontend/templates/home/projects.html
index e215c73778..343a216bb1 100644
--- a/app/frontend/templates/home/projects.html
+++ b/app/frontend/templates/home/projects.html
@@ -2,7 +2,7 @@
   <h4 class="text-sm m-t-sm" translate>{{ 'app.public.home.latest_documented_projects' }}</h4>
 
   <uib-carousel interval="5000" disable-animation="true" active="activeSlide">
-    <uib-slide class="h480 cover r" ng-repeat="p in lastProjects track by $index" index="$index" style="background-image:url('{{p.project_image}}');">
+    <uib-slide class="h480 cover r" ng-repeat="p in lastProjects track by $index" index="$index" style="background-image:url('{{p.project_image | encodeURI}}');">
       <div class="carousel-caption">
         <h1 class="title"><a ui-sref="app.public.projects_show({id:p.slug})">{{p.name}}</a></h1>
       </div>
diff --git a/app/frontend/templates/projects/index.html b/app/frontend/templates/projects/index.html
index 6aabdbc522..40bcb635c5 100644
--- a/app/frontend/templates/projects/index.html
+++ b/app/frontend/templates/projects/index.html
@@ -117,7 +117,7 @@ <h3 translate>{{ 'app.public.projects_list.filter' }}</h3>
   <div class="projects-list">
     <span ng-show="projects && (projects.length == 0)"> {{ 'app.public.projects_list.project_search_result_is_empty' | translate }} </span>
     <div class="project-card" ng-repeat="project in projects" ng-click="showProject(project)">
-        <div class="project-image" style="background-image: url({{project.project_image}});">
+        <div class="project-image" style="background-image: url('{{project.project_image | encodeURI}}');">
           <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon" bs-holder ng-if="!project.project_image">
         </div>
 
diff --git a/app/frontend/templates/spaces/index.html b/app/frontend/templates/spaces/index.html
index 09c5dec9fa..7df55692f1 100644
--- a/app/frontend/templates/spaces/index.html
+++ b/app/frontend/templates/spaces/index.html
@@ -52,7 +52,7 @@ <h1 translate>{{ 'app.public.spaces_list.the_spaces' }}</h1>
           <div class="panel-heading picture" ng-if="!space.space_image_attributes" ng-click="showSpace(space)">
             <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon" bs-holder class="img-responsive">
           </div>
-          <div class="panel-heading picture" style="background-image:url('{{space.space_image_attributes.attachment_url}}')" ng-if="space.space_image_attributes" ng-click="showSpace(space)">
+          <div class="panel-heading picture" style="background-image:url('{{space.space_image_attributes.attachment_url | encodeURI}}')" ng-if="space.space_image_attributes" ng-click="showSpace(space)">
           </div>
           <div class="panel-body">
             <h1 class="text-center m-b">{{space.name}}</h1>
diff --git a/app/frontend/templates/trainings/index.html b/app/frontend/templates/trainings/index.html
index c370ac1267..c56fe6906f 100644
--- a/app/frontend/templates/trainings/index.html
+++ b/app/frontend/templates/trainings/index.html
@@ -25,7 +25,7 @@ <h1 translate>{{ 'app.public.trainings_list.the_trainings' }}</h1>
           <div class="panel-heading picture" ng-if="!training.training_image_attributes" ng-click="showTraining(training)">
             <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon" bs-holder class="img-responsive">
           </div>
-          <div class="panel-heading picture" style="background-image:url('{{training.training_image_attributes.attachment_url}}')" ng-if="training.training_image_attributes" ng-click="showTraining(training)">
+          <div class="panel-heading picture" style="background-image:url('{{training.training_image_attributes.attachment_url | encodeURI}}')" ng-if="training.training_image_attributes" ng-click="showTraining(training)">
           </div>
           <div class="panel-body">
             <h1 class="m-b text-center">{{training.name}}</h1>