从文件夹反应加载图像导致自动重新加载应用程序

Question

这是我的项目文件夹结构

• 后端

  • index.ts

• 前端（反应）

  • 资产
    • logo.png
  • index.jsx
  • index.html

• node_modules

• 上传

  • myimage1.png
  • myimage2.png
  • myimage3.png
  • myimage4.png
  • myimage5.png

• default-image.png

index.jsx

data = [
 {msg:'firstimage',name:'myimage1'},
 {msg:'secondimage',name:'myimage2'},
 {msg:'thirdimage',name:'myimage3'},
 {msg:'fourthimage',name:'myimage4'},
 {msg:'fifthimage',name:'myimage5'},
]

<div>
 data.map((item) => (
 let img_path = '';
  try{
               img_path = require(`../uploads/${item.name}.png`)                             
  }
  catch(err){
               img_path = require(`../default-image.png`)                             
 
  }
   <img
    alt={item.msg}
    src={img_path}
  />
 )
<div>

上面的代码可以正常工作，但是每当新图像上传到uploads 文件夹时，都会导致 React 应用重新启动并中断应用。

Answer 1

将uploads 文件夹移动到assets 文件夹内