Vue.js中如何通过Props传递图片URL？图片不显示问题

你当前的问题出在img标签的src属性写法错误，使用了${{imageurl}}这种不符合Vue语法的混合写法，导致无法正确解析imageurl这个prop的值。

正确的两种写法： #

1. 使用v-bind动态绑定（推荐）

Vue中动态绑定属性应该用v-bind:src（或简写:src），直接绑定到props的imageurl：

<template>
  <div class="newsitem">
    <img :src="imageurl" alt="newsimage" width="200" height="100">
    <h1 class="newstitle">{{title}}</h1>
    <p class="newsdescription">{{description}}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    description: String,
    imageurl: String
  },
  data() {
    return {};
  }
};
</script>

2. 使用插值语法（不推荐）

如果一定要用插值，直接写{{imageurl}}即可（注意这种写法在Vue 2+中不推荐用于属性绑定，官方更建议用v-bind）：

<img src="{{imageurl}}" alt="newsimage" width="200" height="100">

验证传递逻辑 #

你调用组件时的代码:imageurl="nachricht.urlToImage"是正确的，只要nachricht.urlToImage确实是有效的在线图片链接，修改上述img标签后就能正常显示图片。

内容的提问来源于stack exchange，提问作者mikasa