关键依赖：依赖的请求是一个表达式，当使用 v-bind 时

Question

我正在尝试使用道具作为图像源。虽然当我使用 v-bind 调用道具或脚本中的任何对象时，终端会抛出错误

严重依赖：依赖的请求是一个表达式

网页完全空白。除了 app.vue 上的内容。

这是供参考的代码。我正在使用静态变量和通用字符串进行测试，但使用道具得到了相同的结果。最终目标是什么

<template>
  <div id="HomeListing">
    <div class="card bg-dark text-white">
      <img v-bind:src="require(skl)" class="card-img" alt="image unavailable">
      <div class="card-img-overlay">
        <h5 class="card-title">{{title_of}}</h5>
        <p class="card-text">{{body}}</p>
        <p class="card-text">{{timestamp}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeListing',
  props: {
    src: String,
    title_of: String,
    body: String,
    timestamp: String
  },
  data: function () {
    return {
      skl: 'squirel'
    }
  }
}
</script>

<style scoped>

</style>

Answer 1

你有正确的方法！只需稍作改动： 您需要将required() 放入数据部分，而不是模板部分。

所以像这样 - squirel 似乎是图像（顺便说一句，它拼写为“松鼠”）：

<template>
  <div id="HomeListing">
    <div class="card bg-dark text-white">
      <img v-bind:src="skl" class="card-img" alt="image unavailable">
      <div class="card-img-overlay">
        <h5 class="card-title">{{title_of}}</h5>
        <p class="card-text">{{body}}</p>
        <p class="card-text">{{timestamp}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeListing',
  props: {
    src: String,
    title_of: String,
    body: String,
    timestamp: String
  },
  data: function () {
    return {
      skl: require('squirel')
    }
  }
}
</script>