时间戳

首页 > 解决方案 > 反应，渲染图像名称中带有空格的问题

javascript - 反应，渲染图像名称中带有空格的问题

问题描述

我的 React-Express 应用程序有问题，名称中带有空格的图像不会在应用程序中呈现，但路径是正确的。
名称中没有空格的图像效果很好。
路径是正确的并且可以在浏览器中使用，因为 % 替换了空格。

带空格的图片： 没有空格的图片 上传图片的组件：

const FileUpload = () => {
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 => {
  setFile(e.target.files[0]);
  setFilename(e.target.files[0].name);
};

const onSubmit = async e => {
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);
  }
}
  };

返回：

  return (
   <Fragment>
    <form onSubmit={onSubmit}>
    <div className='custom-file mb-4'>
      <input
        type='file'
        className='custom-file-input'
        id='customFile'
        onChange={onChange}
      />
      <label className='custom-file-label' htmlFor='customFile'>
        {filename}
      </label>
    </div>
    <input
      type='submit'
      value='Upload'
    />
  </form>
  {uploadedFile ? (
    <div>
      <div>
        <h3>{uploadedFile.fileName}</h3>
        <img src={uploadedFile.filePath} alt={uploadedFile.fileName} /> // Image here
      </div>
    </div>
  ) : null}
   </Fragment>
  );
 };

 export default FileUpload;

标签： javascriptreactjs

解决方案

您可以先处理这些路径encodeURI，以转义任何特殊字符：https ://www.w3schools.com/jsref/jsref_encodeuri.asp

此函数对特殊字符进行编码，除了： , / ? : @ & = + $ # （encodeURIComponent()用于对这些字符进行编码）。

'/uploads/350 x 150.png'变成'/uploads/350%20x%20150.png'

推荐阅读