Enlarged images did not displayed in browser, vite, react

Question

I have a Vite-React app where I have normal size and enlarged images (for retina screen users). All the mentioned images are stored in the public/img/ directory.

The problem arises when I use the Toggle device toolbar in my browser to check how the app looks on iPhones. Unfortunately, the enlarged images are not displayed, and the console shows a 404 error.

enter image description here

On normal screens my original(smaller ones) images are displayed correctly. There is only a problem with these enlarged images. I checked it in Chrome, Edge, Firefox, Opera - the same.

when i go to http://localhost/img/person1.png - original image is displayed but when i go http://localhost/img/person1@x2.png - enlarged image is not displayed, 404

what i did: -checked 1mln times the path, name and extension of enlarged images;

• converted enlarged images to webp, png, jpeg;
• checked permissions of all images(original and enlarge), enlarged ones have the same like original: -rw-r--r--
• checked if enlarged images properly open after double clicking - yes, they open properly;
• used chatGPT and listened to its apologies many times when its suggestions did not help;
• resized images on 3 different online sites;
• tried to enlarge any other random images and they also did not displayed;

what else i can check?

i do not think there is a bug in my react component. so i will not littering here with my whole component. here is only one line of my code. all is working correct here.

<img className="person__image" src={image} srcSet={`${imagex2} 2x`} alt={name} />

package.json

{
  "name": "html-css",
  "version": "0.1.0",;
  "private": true,
  "dependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "sass": "^1.63.6"
  }
}