时间戳

首页 > 解决方案 > 使用带有 Handlebars.js 的 Parcel.js 并且不加载

javascript - 使用带有 Handlebars.js 的 Parcel.js 并且不加载

问题描述

我正在研究我的handlebars.js 技能并且遇到了一个有趣的问题。我正在使用 Parcel.js 来捆绑我的项目。我的一个模板有一个图像键，其中包含指向我的项目文件夹中的图像的链接，以显示所有字符。我的问题是模板编译时图片不显示，只有alt标签信息。这是我的把手模板：

<script id="character-template" type="text/x-handlebars-template">
      {{#each this}}
      <div class="characters">
        {{#if image}}
        <div class="character-image">
          <img src="{{image}}" alt="picture of {{name}}">
        </div>
        {{/if}}
        <div class="character-info">
          <h3>{{name}} {{#if rank}} <span class="rank">({{rank}})</span></h3>{{/if}}
          {{#if team}}
          <p>Team: {{team}}</p>
          {{/if}}
        </div>
      </div>
      {{/each}}
    </script>

正如我所说，所有其他信息都编译得很完美，但图像 src 链接。我尝试使用 {{{image}}}, ./images/{{image}} 并且在密钥内部我尝试了相同的“image”：“./images/image.jpg”以及所有其他可能的组合模板和密钥。我可以在控制台消息中看到对 localhost/image.jpg 发出了 GET 请求，但它从未显示。如果我在图像键中放置一个 http 链接，它会显示该图像，如果我在模板之外使用标签，图像也会显示。我知道这与 Parcel 的构建方式有关，但不知道如何解决这个问题，因为它只是我的投资组合的一个小项目，我宁愿将图像保存在项目文件夹中。我可以完成这项壮举，还是别无选择，只能在其他地方托管照片？

标签： javascripthandlebars.jsparceljs

解决方案

推荐阅读