Search code examples
javascriptreactjsspace

Dealing with files and folders with space in data.js

If I try to load images/folders with spaces, I get this error.

message: "ENOENT: no such file or directory, stat 'C:\\Users\\John\\ReactProjects\\my-site\\frontend\\build\\index.html'"

Though it works if I delete spaces but I am not satisfied with this solution.

enter image description here

My project hierarchy

project hierarchy

Edit 1 :

products: [
  {
    name: "Gotham",
    category: "NY",
    image: "/images/Homepage and Store/Gotham.jpg",
    countInStock: 5,
  },
...
]

{products.map((product, index) => (
<img
  className="absolute object-contain w-full h-full"
  src={product.image}
  alt={product.name}
/>
)}

server.js

const app = express();
app.use(express.static(path.join(__dirname, "..", "build")));
app.use(express.static("public"));
Solution

  • There is no need to put %20 in the image url in the code. You can freely put there spaces and the browser while requesting the resource will replace them with %20.

    URL in the code:

    "images/Homepage and Store/Gotham.jpg"

    Browser request:

    images/Homepage%20and%20Store/Gotham.jpg