Vue.js：将数据URI绑定到img元素

Question

已解决：毫不奇怪，错误是我的，而不是Vue。我已将opacity: 0设置为具有img属性的所有data-src元素（用于延迟加载），因此图像在那里，由于不透明度设置，它们只是不可见。

我将数据URI作为道具传递给Vue组件并将其绑定到src元素的img属性，但图像不会出现。这是相关的代码：

将prop传递给组件（忽略image_ratio键名称，它是一个数据URI）：

<media-image
  v-if="event.media_type === 'image'"
  :url="event.media_url"
  :caption="event.media_caption"
  :imageUri="event.image_ratio"></media-image>

接受组件内的道具：

props: [
    'url',
    'caption',
    'imageUri'
],

使用src绑定到prop：

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

其他相关信息：

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

谢谢！