在react中，引入图片加载不出来

1、 在react中引入标签使用<img></img>
2、引入img后，在本地展示正常，编译发布后，图片展示异常

<img src='/assets/images/icon.png'> </img>

3、在构建过程中，图片会被复制到dist或者build目录下，并且可能会被重命名，放到不同的路径下
为了解决这个问题，使用模块导入的方式引入图片

import renewalIcon from './assets/images/renewal.png';

function MyComponent() {
  return <img src={renewalIcon} className="renewal-icon" />;
}

4、如果是ts项目，会出现下面的报错
Cannot find module '/src/assets/images/renewal.png' or its corresponding type declarations.

表示：ts在引入一个非代码模块的时候，找不到这个模块的声明，要告诉ts如何处理这些文件
在全局的类型声明文件中vite-env.d.ts中增加

declare module '*.png' {
  const value: any;
  export = value;
}