Fix image paths: Change from /react/templateassets/ to /react/assets/

- Update package.json homepage from /react/template/ to /react/
- Update environment.jsx base_path to /react/ with proper fallback
- Enhance ImageWithBasePath component to handle path concatenation correctly
- Ensure proper slash handling between base_path and image src paths

package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-app",
   "version": "0.1.0",
-  "homepage": "/react/template/",
+  "homepage": "/react/",
   "private": true,
   "dependencies": {
     "@ckeditor/ckeditor5-build-classic": "^41.2.0",

src/core/img/imagewithbasebath.jsx

@@ -1,9 +1,23 @@
 import React from "react";
 import PropTypes from "prop-types"; // Import PropTypes
 import { base_path } from "../../environment";
+
 const ImageWithBasePath = (props) => {
   // Combine the base path and the provided src to create the full image source URL
-  const fullSrc = `${base_path}${props.src}`;
+  // Handle both relative and absolute paths
+  let fullSrc;
+  if (props.src.startsWith('http')) {
+    fullSrc = props.src;
+  } else {
+    // Ensure there's always a slash between base_path and src
+    const cleanBasePath = base_path.endsWith('/') ? base_path : base_path + '/';
+    const cleanSrc = props.src.startsWith('/') ? props.src.substring(1) : props.src;
+    fullSrc = `${cleanBasePath}${cleanSrc}`;
+  }
+
+  // For debugging - remove in production
+  // console.log('Image path:', fullSrc);
+
   return (
     <img
       className={props.className}
@@ -12,6 +26,11 @@ const ImageWithBasePath = (props) => {
       alt={props.alt}
       width={props.width}
       id={props.id}
+      onError={() => {
+        console.error(`Failed to load image: ${fullSrc}`);
+        // Optionally set a fallback image
+        // e.target.src = `${base_path}assets/img/placeholder.png`;
+      }}
     />
   );
 };

src/environment.jsx

@@ -1,2 +1,5 @@
-// export const base_path = "/react/template/";
-export const base_path = "/";
+// For development environment
+export const base_path = process.env.PUBLIC_URL || "/react/";
+
+// For production with a subdirectory (uncomment and modify as needed)
+// export const base_path = "/react/";