react.js - Vite 4.x + React 批量导入图片打包部署不显示?

Question

vite4.x+React批量导入图片打包部署后不显示

vite.config.ts中配置了assetsDir: 'statics',打包之后的图片都在statics目录中,导入图片的代码如下：

const images = import.meta.glob('@/assets/images/sample/rack/*.png')const [imgUrlsMap, setImgUrlsMap] = useState<any>()useEffect(() => {    Promise.all(      Object.keys(images).map(async (key) => {        const module: any = await images[key]();        const imageUrl = new URL(module.default, import.meta.url).href      return imageUrl;      })    ).then((urls) => {      //     const ImgPathMap: any = urls.reduce((total: any, current: any) => {      return {        ...total,        [current?.split('/')?.slice(-1)[0]?.split('.')[0]]: current// 值：http://localhost:3187/imh_view/src/assets/images/sample/rack/6.png      }    }, {})    setImgUrlsMap(ImgPathMap)  })}, [])        {           rackSpeci?.map((item: any, idx: number) => (              <Col key={idx} style={{ display: 'inline-block', marginBottom: 10, marginRight: 6}}>                  <img                      className={styles.rackImg}                      title={item.remark}                      src={idx === imgIdx ? imgUrlsMap[`${item.rule}-${item.rule}`] : imgUrlsMap[item.rule]}                      onClick={() => onSpeciSelect(item,idx)}                  />                  <div style={{ textAlign: 'center'}}>{ item.name }</div>                  <div style={{ textAlign: 'center'}}>({ item.rowNum + 'X' + item.columnNum }）</div>              </Col>            ))        }

得到的图片地址：http://localhost:3187/imh_view/src/assets/images/sample/rack/6.png
问题描述：在本地开发环境中图片能显示出来，打包部署之后不显示，审核元素查看img元素甚至没看到src属性，请问该如何解决呢

Answer 1

图片不要用 vite 来处理，直接扔到 public 里。

上线之后如果需要处理，写服务器脚本或者在服务器端来做。

Answer 2

图片在打包部署后不显示的问题通常与路径处理有关。在 Vite 打包过程中，静态资源（如图片）会被处理并放在构建输出的特定目录中，通常不是源代码目录。因此，在部署后，如果你还使用源代码目录的路径去访问图片，图片将找不到。

你得到的图片地址 http://localhost:3187/imh_view/src/assets/images/sample/rack/6.png 显然是指向源代码目录的，这不是打包后的正确路径。

解决这个问题，你需要确保在部署环境中使用正确的资源路径。以下是一些可能的解决方案：

1. 使用 publicPath：
   你可以在 vite.config.ts 中设置 publicPath 来定义资源的基础路径。这通常是你的部署目录的路径。

   // vite.config.tsexport default {  // ...  base: './', // 如果你在根目录部署，设置为'./'，否则设置为实际的部署路径  publicPath: '/', // 或者根据你的部署环境设置  // ...}

这样，Vite 就会将公共路径添加到所有的资源 URL 中。

2. 动态构建图片路径：
   在构建后，你需要确保图片路径是根据部署目录来动态生成的。通常，这涉及到获取 import.meta.url 并在其上构建相对路径。

   const images = import.meta.glob('@/assets/images/sample/rack/*.png');useEffect(() => {  Promise.all(    Object.keys(images).map(async (key) => {      const module = await images[key]();      const imageUrl = new URL(module.default, import.meta.url).href;      // 确保 imageUrl 是相对于构建后的 publicPath      return imageUrl;    })  ).then((urls) => {    // ...你的代码逻辑  });}, []);

3. 检查部署环境：
   确保你的部署环境正确地设置了服务器，以便可以访问静态资源。例如，如果你在 Nginx 或 Apache 上部署，确保你的静态资源目录（比如 Vite 打包后的 dist 目录）被正确配置为可访问。
4. 审查网络请求：
   使用浏览器的开发者工具查看网络请求，确保没有 404 错误，并且资源确实被请求了。

如果上述方法仍然不工作，请进一步检查你的部署配置，确保 Vite 打包后的资源路径与服务器设置相匹配。

此外，对于图片资源的批量导入，你可能还需要检查 Vite 的版本以及是否有任何已知的关于批量导入的 bug 或更新。查看 Vite 的文档和更新日志可能有助于解决特定于版本的问题。