我有一个区域,人们可以上传自己的用户图像。但如果没有,我想显示一个默认值。在谷歌上搜索了一下之后,我发现我可以这样做,比如-
<img :src="creatorImage" @error="defaultAvatar">
但是,我不知道如何创建一个方法来传递正确的(默认)图像。
2g32fytz1#
我用一个计算的属性来做,像这样:
<template> <img :src="creatorImage" @error="imageError = true"/> </template> <script> ... data() { return { imageError: false, defaultImage: require("@/assets/imgs/default.jpg") }; }, computed: { creatorImage() { return this.imageError ? this.defaultImage : "creator-image.jpg"; } } ... </script>
quhf5bfb2#
我建议为此创建一个组件,因为它听起来像是将在更多地方使用的东西。JsFiddle example组件
Vue.component('img-with-default', { props: ['defaultImg'], data: function () { return { defaultAvatar: this.defaultImg || 'https://cdn0.iconfinder.com/data/icons/crime-protection-people/110/Ninja-128.png' } }, computed:{ userImage: function() { if(this.uploadedImg != null) { return this.uploadedImg; } else { return this.defaultAvatar; } } }, template: '<img :src="userImage">' })
使用该组件将是
HTML
<div id="editor"> <img-with-default></img-with-default> <img-with-default default-img="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-128.png" ></img-with-default> </div>
JS
new Vue({ el: '#editor' })
这样你就有了默认的图像。如果你愿意,你可以创建一个组件,显示传递的img src或默认的。
组件
Vue.component('img-with-default', { props: ['imgSrc'], data: function () { return { imageSource: this.imgSrc || 'https://cdn0.iconfinder.com/data/icons/crime-protection-people/110/Ninja-128.png' } }, template: '<img :src="imageSource">' })
并加以利用
<div id="editor"> <img-with-default></img-with-default> <img-with-default img-src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-128.png" ></img-with-default> </div>
lpwwtiir3#
以上所有的都是不必要的复杂。以下是最简单的方法:
<img :src="image||'default.png'" />
3条答案
按热度按时间2g32fytz1#
我用一个计算的属性来做,像这样:
quhf5bfb2#
我建议为此创建一个组件,因为它听起来像是将在更多地方使用的东西。
JsFiddle example
组件
使用该组件将是
HTML
JS
这样你就有了默认的图像。
如果你愿意,你可以创建一个组件,显示传递的img src或默认的。
组件
并加以利用
HTML
lpwwtiir3#
以上所有的都是不必要的复杂。以下是最简单的方法: