Vue.js:将数据URI绑定到img元素的src属性时，不显示图像

已解决：毫不奇怪，错误是我的，而不是Vue的。我将

opacity:0

设置为所有

img

元素，这些元素具有

data src

属性（用于延迟加载），因此图像就在那里，它们只是因为不透明度设置而不可见

---

我将数据URI作为道具传递给Vue组件，并将其绑定到

img

元素的

src

属性，但图像不会出现。以下是相关代码：

将道具传递给组件（忽略

image\u比率

键名，它是一个数据URI）：

并使用将src绑定到道具：

<img :src="imageUri" :data-src="url" class="img-fluid" :id="imageId" :alt="caption">

其他相关信息：

• 该道具已成功传递到组件（它在使用vue devtools时显示为道具）
• 当使用DevTools检查img元素时，数据URI作为img元素的src出现在DOM中
• 复制数据URI并将其用作Vue组件外部img元素的src可以正常工作

---

谢谢

您是否在任何地方定义了

imageId

？如何为

媒体图像指定模板？是的，它是一个计算属性。模板是HTML标记，由单个文件组件中的
标记包围。您使用的Vue.js版本是什么？试试这两个：
v-bind:src=“imageUri”
和
：src=“{{imageUri}}”
？是否在任何地方定义
imageId
？如何为
媒体图像指定模板？是，它是一个计算属性。模板是HTML标记，在单个文件组件中由
标记包围。您使用的Vue.js版本是什么？试试这两个：
v-bind:src=“imageUri”
和
：src=“{imageUri}}”
？
props: [
    'url',
    'caption',
    'imageUri'
],

<img :src="imageUri" :data-src="url" class="img-fluid" :id="imageId" :alt="caption">