0

I am wondering why React does not display images with characters in the name such as: ą, ć, ż, ł etc ? In my case they are Polish characters. I have all filenames stored as path in MongoDB database then display them using map function. The status of all images is stored in Redux. All images are placed in the public directory. When I copy the file name and paste it to the URL, the browser displays the photo normally, but React itself no longer does. What is the cause of this behavior ? What I tried was trying to pass the filename through the encodeURI() function, e.g. <img src={encodeURI(file.name) />, but with no positive result.

{video.map((file) => (
  <li
    key={file.name}
  >
      <img
        src={file.cover}
        alt={file.name}
      />
  </li>
))}

Aciton from Redux:

export const moviesList =
  (keyword = '') =>
  async (dispatch, getState) => {
    try {
      dispatch({ type: VIDEO_LIST_REQUEST })

      const { data } = await axios.get(
        `/api/video?keyword=${keyword}`,
        config
      )

      dispatch({
        type: VIDEO_LIST_SUCCESS,
        payload: data,
      })
    } catch (error) {
        ...
      })
    }
  }
nsog8sm43x
  • 329
  • 5
  • 14
  • 2
    I don't think this is a React issue. What does your browser's dev tools say, are the requests e. g. 404ing? – AKX Aug 01 '21 at 15:21
  • 1
    This won't be a React issue. Look in the browser console to see what's being requested from the server (the exact `src` value), and what responses the server is providing. – T.J. Crowder Aug 01 '21 at 15:22
  • 1
    Are you sure `file.cover` has correct value? Show us an actual value for the property. – zhulien Aug 01 '21 at 15:22
  • How are you querying the data? MongoDB has [some special behavior](https://stackoverflow.com/a/43138610/4756341) when it comes to querying diacritics – Brendan Bond Aug 01 '21 at 15:23
  • @BrendanBond The author shouldn't be affected by collation in any way as he is not (at least shouldn't) be querying by the actual URLs. – zhulien Aug 01 '21 at 15:28
  • I did not find any errors in console regarding the photos. Only the message "The character encoding of a clear text document was not declared. When displaying this document in some browser configurations, some characters outside the US-ASCII range (if any) may look incorrect. The file's character encoding must be declared in the transfer protocol, or the file must use a byte order tag as an encoding signature." – nsog8sm43x Aug 01 '21 at 15:29
  • @zhulien "Are you sure file.cover has correct value? Show us an actual value for the property." - Yes, because I have other pictures in my collection, without Polish characters, that display correctly. – nsog8sm43x Aug 01 '21 at 15:32
  • Okay then. Show us a `file` object that contains polish characters in the `cover` property. – zhulien Aug 01 '21 at 15:35
  • @zhulien https://imgur.com/wZ0KKMi – nsog8sm43x Aug 01 '21 at 15:41
  • @nsog8sm43x You've stated ``. Do you mean ``? Maybe a typo? In any case, you shouldn't have any problems opening the image after you encode the URI. Also, as a suggestion, you shouldn't use such characters in the filenames in the first place. – zhulien Aug 01 '21 at 15:57
  • Yes, I made a mistake in the description. There is a function with the correct parameter in the code. After adding it again I got a 404 error in the console for all missing images. – nsog8sm43x Aug 01 '21 at 16:00

0 Answers0