使用带有Handlebars.js和<img>的Parcel.js不加载

时间:2019-12-05 23:40:27

标签: javascript handlebars.js parceljs

我正在处理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的构建方式有关,但不知道如何解决此问题,并且由于这只是我投资组合中的一个小项目,我宁愿将图像保存在项目文件夹中。我能否完成这项壮举,还是别无选择,只能在其他地方托管照片?

0 个答案:

没有答案