问题描述
我正在尝试使用道具作为图像源。尽管当我使用 v-bind 调用 prop 或脚本中的任何对象时,终端会抛出错误
关键依赖:依赖的请求是一个表达式
并且网页完全空白。除了 app.vue 上的内容。
这里是代码供参考。我使用静态变量和通用字符串进行测试,但使用 prop 得到了相同的结果。最终目标是什么
<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>
解决方法
你有正确的方法!只需要稍作改动:
您需要将 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>