Question

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

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

0 个答案: