carousel singleItem 组件中的图像 src Vue + nuxt

问题描述

我必须在 singleItem 组件中显示产品 img。 我有 API（文件），其中包含以下对象：

 {
        "name": "stand","type": "T01","link": "xx/xxx/317951/?cv=6&board=cat_all__type_all__id_4244","width": 148,"height": 53,"depth": 32,"img": "assets/images/stand/317951.jpg","img_webp": "assets/images/stand/317951.webp","stand_type": "1"
    },

在 singleItem 组件中我尝试：

  <div class="item">
  <div class="item__img">
      <img :src="item.img"> -- display nothing
      <img :src="'~/' + item.img"> display nothing
      <img src="~/assets/images/shelf/317951.jpg"> - show right img
  </div>
  {{item.img}} - display string 'assets/images/stand/317951.jpg'

请给我一些解决方案或提示来处理它。

解决方法

您必须使用 require 指令，如下所示：

<img :src="require('~/' + item.img)">

查看文档：{​​{3}}

---

另一种方法是在您的 nuxt static 目录中移动您的静态资源 (jpeg/webp)。

例如，对于保存在以下路径 static/images/stand/317951.jpg 中的图像文件，公共源将在以下 URL /images/stand/317951.jpg（或完整 URL：http://localhost:3000/images/stand/317951.jpg）处提供>