html - 无法使用 VueJS 渲染图像

标签 html css vue.js

我正在尝试使用 VueJS 将照片填充到我的 index.html 中。我正在使用 iTunes API,返回链接返回图像的 URL。

我的问题是,我无法渲染照片。 item 是一个对象。

我试过这样做。但是,它会导致整个网页无法显示(全白)。所以,这是完全错误的。最初, v-bind:src= 指向我文件夹中的图像。但我正在尝试动态获取 URL。

<div class="col-sm-4" style='max-width:200px;margin-right: 30px'>
    <img style='width: 120%; display: inline; ' v-bind:src="{{ item.artworkUrl100 }}">
</div>

当我这样做时,我实际上可以在我的网页上看到其余数据。但是,图像不会显示。

<div class="col-sm-4" style='max-width:200px;margin-right: 30px'>
     {{ item.artworkUrl100 }}
</div>

我不确定如何使用 VueJS 语法将图像动态嵌入到我的网站中。

最佳答案

删除{{ }}

<img style='width: 120%; display: inline; ' v-bind:src="item.artworkUrl100">

关于html - 无法使用 VueJS 渲染图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60822824/

相关文章:

html - 扩展整个网站

html - 如何获取从右上角到左下角的渐变色

typescript - Vue 库类型

vue.js - 使用 Vue 单击以编辑文本字段

javascript - vue js Prop 重置计时器

HTML:在浏览器中流式传输视频,而不容易下载 mp4

javascript - 将 <div> 元素设置到固定位置

javascript - 如何消除 html 中的换行敏感度?

jquery - 用文本扩展的表格行

html - 嵌套的 div 应根据其中的 div 调整大小,但它们不会