长描述左侧的可能图像

Question

Meteor 客户端模板助手有一个对象数组{image: url, label: description}。该 url 可以是公共目录中图像文件的有效 url，也可以是字符串“non”。
描述可以是简短的几句话或几行长文本。

我需要想出一种在标签左侧显示图像的方法，但需要满足以下条件：

1. 在没有图像的情况下，标签将使用图像应该存在的空间。
2. 如果长标签和图像不存在，图像应该在的位置不会在此项目和之前的项目之间创建空白空间。

我下面的建议代码在这两个要求上都失败了。有更好的方法来完成这项工作吗？谢谢

.list-item {
  margin: 1em;
}
input {
  display: block;
  width: 100%;
}
.checks-row li {
  vertical-align: middle;
  display: inline-block;
}
li .non {
  display: none;
}
img[src="/non"] {
  display: none;
}
.check-image {
  width: 3.5em;
}

<template name="checks">
  <form>
    <div class="list-item">
      <input type="text" placeholder="Start typing, fast find">
    </div>

    <div class="list-item">
      {{#each values}}
      <ul class="checks-row" data-key={{this.key}}>
        <li class="check-image {{this.image}}">
          <img src="/{{this.image}}">
        </li>
        <li class="check-label">{{this.label}}</li>
      </ul>
      {{/each}}
    </div>
  </form>
</template>

Answer 1

在我看来像树枝

{% if this.image %}
image exist
{% else %}
no image exists
{% endif %}

如果图像存在，您可以使用它来设置一个类并从该类开始:)