Vite构建时未复制使用data-src的图片至dist目录的问题

核心原因 #

Vite默认只会追踪标准资源属性（如<img>的src、<link>的href）里的文件路径，data-src属于自定义属性，不在默认扫描范围内，所以对应的图片不会被复制到dist目录。

可行解决方案 #

方案1：框架项目中动态绑定资源（推荐） #

如果是Vue/React等框架项目，通过import引入图片资源，再动态绑定到data-src属性，Vite会自动识别并打包该图片：

以Vue为例：

<template>
  <img class="lozad" :data-src="logoImage" alt="站点logo">
</template>

<script setup>
// 导入图片资源，Vite会自动处理该资源的打包路径
import logoImage from '@/assets/img/logos/your-logo.png'
</script>

方案2：静态HTML项目自定义Vite插件 #

如果是纯静态HTML项目，可在Vite配置中编写简单插件，扫描并处理data-src里的图片路径：

修改vite.config.js：

export default {
  plugins: [
    {
      name: 'handle-data-src',
      transformIndexHtml(html) {
        // 匹配HTML中data-src指向src/assets下的图片
        return html.replace(
          /data-src="(\/src\/assets\/img\/logos\/.+?)"/g,
          (_, imgPath) => {
            // 将路径转为Vite可识别的资源引用，打包时会自动复制图片到dist
            const resolvedPath = new URL(imgPath, import.meta.url).href
            return `data-src="${resolvedPath}"`
          }
        )
      }
    }
  ],
  // 确保Vite识别所有图片格式（默认已包含常见格式，可按需添加）
  assetsInclude: ['**/*.png', '**/*.jpg', '**/*.svg', '**/*.webp']
}

方案3：配置Vite的assetsInclude（辅助） #

如果图片格式比较特殊（比如自定义格式），可以通过assetsInclude让Vite识别，但这只是基础前提，核心还是要让Vite追踪到data-src里的路径，需要配合上面的方案使用。

内容的提问来源于stack exchange，提问作者Kiyoshi