gulp构建项目图片无法显示，非gulp项目图片也消失问题求助

问题排查步骤 #

优先级1：全局环境排查（非gulp项目也异常，优先排查这部分） #

• 打开浏览器F12开发者工具，切换到「网络」面板，刷新页面查看图片请求的状态码：
  • 如果是404：核对请求的资源路径和本地实际文件存放路径是否一致
  • 如果是其他报错：查看错误描述判断是否是拦截、跨域类问题
• 临时关闭本地杀毒软件、防火墙、代理工具后重试，排除资源被误拦截的可能
• 直接在浏览器地址栏输入本地图片的完整路径（本地文件路径或本地服务路径），测试是否能单独打开图片，确认不是浏览器/系统层面的资源加载限制

优先级2：gulp配置问题排查 #

你提供的gulp配置存在以下几个可能导致图片异常的问题：

1. 缺失project_folder变量定义，配置开头仅定义了source_folder = "#src"，但所有构建输出路径都调用了未赋值的project_folder，会导致构建产物输出到错误目录
2. 缺少webp兼容判断逻辑：你使用了webphtml、webpcss两个插件，需要在页面head中插入以下JS代码（执行时机早于CSS加载），给html标签添加对应类名，浏览器才能正确判断加载webp还是原格式图片：

function testWebP(callback) {
    var webP = new Image();
    webP.onload = webP.onerror = function () {
        callback(webP.height == 2);
    };
    webP.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA";
}
testWebP(function (support) {
    document.querySelector('html').classList.add(support ? 'webp' : 'no-webp');
});

3. 核对源码目录名称：你配置的源目录是#src，如果实际源码目录名没有前缀#，gulp无法读取到源图片文件，自然不会输出到构建目录
4. 构建完成后检查输出目录下的img文件夹是否存在，里面是否有对应图片文件

优先级3：项目路径引用排查 #

• 核对页面内图片引用的路径是否正确，相对路径要对应页面文件和图片文件的目录层级，绝对路径要匹配本地服务的根目录设置

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