为Vue组件指定默认图像源

时间:2017-05-20 03:24:48

标签: webpack vuejs2

我正在构建一个基于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>

这是我的项目结构:

enter image description here

我正在使用Vue-Cli和webpack-simple模板启动器。我在这里缺少什么?

0 个答案:

没有答案