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

Question

我正在尝试在故事书故事中使用图像。在原始应用程序中，它动态插入了一个图像，我需要在故事书中重现它。

我已经设法使用 required 将图像放入故事书中（导入只是抛出错误），但是我不知道如何将其添加到模板字符串中。

有人可以帮忙吗？

这是我所拥有的：

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: {
      },
    }))

标签： angularstorybook