长描述左侧的可能图像

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 %}

你可以使用它来设置一个类，如果图像存在并从那里开始：）