在Storybook中的模板字符串中使用图像

时间:2019-06-18 12:47:36

标签: angular storybook

我正在尝试使用故事书故事中的图片。在原始应用中,它具有动态插入的图像,我需要在故事书中重现该图像。

我已设法使用所需的图像将其放入故事书中(导入只是引发了错误),但是我无法弄清楚如何将其添加到模板字符串中。

有人可以帮忙吗?

这就是我所拥有的:

var imageFile = require('./static/defaultfeeditem.jpg');
const image = {
  src: imageFile,
  alt: 'my image',
};


.add('Individual item', () => (
{
  template:
    `
    <!-- *ngFor="let recipe of recipes" no longer used since component was introduced.-->
    <ion-card class="ion-no-margin feedCard">
      <!-- loop though all recipies in recipies.page.ts module.-->
      <ion-img class="feedCard__img" [src]=imageFile"></ion-img><!-- [isPropertybinding] in this context-->
      <div class="feedCard__img--circles">
        <ion-icon name="radio-button-off"></ion-icon>
        <ion-icon name="radio-button-off"></ion-icon>
        <ion-icon name="radio-button-off"></ion-icon>
      </div>
    </ion-card>
    <div class="feedCard__label">
      <ion-label> {{ feedItem.title }} </ion-label>
      <!-- string interprelation -->
      <ion-label><strong> {{ feedItem.distance }}km </strong></ion-label> <!-- string interprelation -->
    </div>
    `,
      props: {
      },
    }))

0 个答案:

没有答案