Handlebars模板无法解析img标签URL致图片不显示问题求助

问题分析 #

文本渲染正常说明Handlebars的数据传递、模板编译逻辑都没问题，问题集中在图片路径的解析或资源访问权限上。从你提供的信息看，生成的img标签路径./images/Shelters/photo_1.jpg在理论上是正确的（portfolio.html在src根目录，图片在src/images下），但加载失败大概率是以下几个原因：

排查与解决方案 #

1. 先验证路径的实际有效性 #

在浏览器地址栏直接访问图片的完整URL（比如你的portfolio.html访问地址是http://localhost:3000/portfolio.html，那么图片URL就是http://localhost:3000/images/Shelters/photo_1.jpg），看能否打开图片：

• 如果打不开：说明图片不存在、路径拼写错误（比如大小写不一致，Linux/macOS系统文件名大小写敏感），或者服务器没有正确映射图片目录。
• 如果能打开：说明是动态插入DOM时的路径解析问题，或者浏览器本地访问限制。

2. 针对不同场景的解决方案 #

场景A：直接用file://协议打开portfolio.html

浏览器对本地文件的访问有安全限制，直接用file://打开页面时，相对路径的资源可能无法加载。解决方法：

• 用开发服务器运行项目，比如安装http-server（npm install -g http-server），然后在src目录执行http-server，通过http://localhost:8080/portfolio.html访问页面。

场景B：使用构建工具（Vite/Webpack等）

构建工具对静态资源的处理有特定规则，直接写相对路径可能不会被正确打包：

• Vite环境：
  • 把images目录移到项目根目录的public文件夹下（如果没有就新建），然后把data.json里的路径改成/images/Shelters/photo_1.jpg（绝对路径，相对于服务器根）。
  • 或者在JS中导入图片路径，替换data.json里的url数组：

    import img1 from '../images/Shelters/photo_1.jpg';
    import img2 from '../images/Shelters/photo_2.jpg';
    // 以此类推，然后修改dataJson中对应对象的url数组为[img1, img2, ...]
    

• Webpack环境：
  • 配置asset module处理图片，确保图片被打包到输出目录：在webpack.config.js中添加：

    module.exports = {
      module: {
        rules: [
          {
            test: /\.(png|jpe?g|gif)$/i,
            type: 'asset/resource',
          },
        ],
      },
    };
    

  • 然后在JS中通过require导入图片路径，替换data.json的url数组：

    const dataJson = require('../data.json');
    // 处理url数组
    dataJson['2'].url = dataJson['2'].url.map(path => require(`../${path}`).default);
    

场景C：路径大小写不一致

如果你的服务器运行在Linux或macOS系统上，文件名大小写敏感。检查data.json里的路径（比如Shelters）和实际文件夹的大小写是否完全一致，修改成匹配的格式即可。

场景D：规范模板中的src写法

虽然渲染后生成了引号，但模板里最好显式给src加上引号，避免潜在的解析问题：

<img class="slider-img" src="{{this}}" alt="Фото" />

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