我正在构建一个基于VUE JS的图像查看器,它具有以下脚本
<script>
import _image from './assets/default.jpg';
export default {
name: 'Clickable-Image',
props:[
'isSelected',
'imageSource',
'imageName',
],
// Component Data.
data(){
return {
defaultImage:_image,
}
},
// Component Computed Properties
computed:{
// Appearance Computation.
containerStyle : function(){
return{
ui:true,
raised:true,
very:false,
padded:true,
blue: !this.isSelected,
green: this.isSelected,
inverted:true,
segment:true,
}
},
// Image to show.
displayImage(){
// This is working if I send the raw image URL
//return "http://i.imgur.com/N9yfg3C.jpg";
var src = "";
if(this.imageSource == "")
return this.defaultImage;
else
return this.imageSource;
}
},
// Component Methods for Event Handling.
methods:{
ToggleSelection : function() {
if(this.isSelected)
this.isSelected=false;
else
this.isSelected=true;
}
}
}
</script>
我想要做的是在没有提供图像URL作为输入时在组件中显示默认图像。
但是,在计算函数中,我无法返回默认图像。当我返回带有图像URL的字符串时(如代码注释中所示),正在显示图像。
注意:当我&#34;返回_image&#34;在我的计算机displayImage()函数中,显示默认图像。
这是我的组件模板。
<template>
<div v-on:click="ToggleSelection()">
<div v-bind:class="containerStyle">
<div class="ui centered card">
<div class="image">
<img v-bind:src="displayImage">
</div>
</div>
</div>
</div>
</template>
这是我的项目结构:
我正在使用Vue-Cli和webpack-simple模板启动器。我在这里缺少什么?