时间戳

首页 > 解决方案 > 来自 json 的 VueJS 图像不会呈现

javascript - 来自 json 的 VueJS 图像不会呈现

问题描述

我有一个这样的 JSON 文件：

"images": {
      "thumbnail": "./assets/starry-night/thumbnail.jpg",
      "hero": {
        "small": "./assets/starry-night/hero-small.jpg",
        "large": "./assets/starry-night/hero-large.jpg"
      },
      "gallery": "./assets/starry-night/gallery.jpg"
    }

我在 Vue 中的代码是：

<img
          v-bind:src="data.images.thumbnail"
          alt=""
          srcset=""
          height="100px"
          width="100px"
        />

它“有效”，它会返回一个 IMG。但是图像的路径是 ./assets/starry-night/gallery.jpg 我认为这就是它无法加载的原因。

我必须欺骗路由器还是什么？

./assets/starry-night/gallery.jpg

在 Chrome 中输出。

标签： javascriptvue.js

解决方案

您的数据被视为字符串，因此它正在寻找当然不存在的路径。只需定义一个const publicUrl = 'http://mysite.test/'地方来完成图像 URL，例如

<img
    v-bind:src="publicUrl + data.images.thumbnail"
    alt=""
    srcset=""
    height="100px"
    width="100px"
/>

此外，您可以通过执行来引用文件夹

<img src="@/assets/starry-night/thumbnail.jpg"/>

推荐阅读