title: React, problem with rendering images with spaces in their name
body: <p>I have a problem with my React-Express application, images with spaces in names are not rendered in the application, but the path is correct.<br>
  Images with no spaces in names work well.<br>
  The paths are correct and work in the browser because % replacing spaces.</p>
  
  <p><a href="https://i.stack.imgur.com/kuBDe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kuBDe.png" alt="Img with space:"></a>
  <a href="https://i.stack.imgur.com/egONP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/egONP.png" alt="Image without space"></a>
  Component for uploading images:</p>
  
  <pre><code>const FileUpload = () =&gt; {
  const [file, setFile] = useState('');
  const [filename, setFilename] = useState('Choose File');
  const [uploadedFile, setUploadedFile] = useState({});
  const [message, setMessage] = useState('');
  const [uploadPercentage, setUploadPercentage] = useState(0);
  
  const onChange = e =&gt; {
    setFile(e.target.files[0]);
    setFilename(e.target.files[0].name);
  };
  
  const onSubmit = async e =&gt; {
  e.preventDefault();
  const formData = new FormData();
  formData.append('file', file);
  
  try {
    const res = await axios.post('/uploads', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
  
    const { fileName, filePath } = res.data;
  
    setUploadedFile({ fileName, filePath });
  
    setMessage('File Uploaded');
  } catch (err) {
    if (err.response.status === 500) {
      setMessage('There was a problem with the server');
    } else {
      setMessage(err.response.data.msg);
    }
  }
    };
  </code></pre>
  
  <p>Return:</p>
  
  <pre><code>  return (
     &lt;Fragment&gt;
      &lt;form onSubmit={onSubmit}&gt;
      &lt;div className='custom-file mb-4'&gt;
        &lt;input
          type='file'
          className='custom-file-input'
          id='customFile'
          onChange={onChange}
        /&gt;
        &lt;label className='custom-file-label' htmlFor='customFile'&gt;
          {filename}
        &lt;/label&gt;
      &lt;/div&gt;
      &lt;input
        type='submit'
        value='Upload'
      /&gt;
    &lt;/form&gt;
    {uploadedFile ? (
      &lt;div&gt;
        &lt;div&gt;
          &lt;h3&gt;{uploadedFile.fileName}&lt;/h3&gt;
          &lt;img src={uploadedFile.filePath} alt={uploadedFile.fileName} /&gt; // Image here
        &lt;/div&gt;
      &lt;/div&gt;
    ) : null}
     &lt;/Fragment&gt;
    );
   };
  
   export default FileUpload;
  </code></pre>