时间戳

首页 > 解决方案 > 轮播单项组件中的图像 src。Vue + nuxt

image - 轮播单项组件中的图像 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'

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

标签： imagevue.jsnuxt.js

解决方案

您必须require按如下方式使用该指令：

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

参见文档：https ://nuxtjs.org/docs/2.x/directory-structure/assets

另一种方法是将静态资产 (jpeg/webp) 移动到 nuxtstatic目录中。

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

推荐阅读