myImage.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <view>
  3. <image v-if="isIcon" style="border-radius: 60rpx;" :class="[mymode=='widthFix'?'imageW':'imagev']" :src="showdefault==1?'/static/logo.png':baseUrl+comUrl" :mode="mymode" @error="imageError" @click="myimageclick"></image>
  4. <image v-if="!isIcon" :class="[mymode=='widthFix'?'imageW':'imagev']" :src="showdefault==1?'/static/logo.png':baseUrl+comUrl" :mode="mymode" @error="imageError" @click="myimageclick"></image>
  5. </view>
  6. </template>
  7. <script>
  8. export default {
  9. name:"myImage",
  10. props:{
  11. mysrc: '',
  12. mymode:'',
  13. isIcon:false
  14. },
  15. data() {
  16. return {
  17. defaultImage:'/static/logo.png',
  18. baseUrl:'https://backend.cityexpress168.com.vn/prod-api',
  19. showdefault:0,
  20. comUrl:this.mysrc
  21. };
  22. },
  23. watch: {
  24. mysrc(val){
  25. this.showdefault=0;
  26. this.comUrl = this.mysrc
  27. //console.log(this.comUrl);
  28. }
  29. },
  30. methods:{
  31. imageError(){
  32. //this.comUrl = this.defaultImage;//morentup
  33. this.showdefault=1;
  34. },
  35. myimageclick(comUrl){
  36. this.$emit('Emyimageclick',comUrl);
  37. },
  38. },
  39. }
  40. </script>
  41. <style>
  42. .imageW{
  43. margin: 0rpx;
  44. width:100%;
  45. }
  46. .imageH{
  47. margin: 0rpx;
  48. height:100%;
  49. }
  50. .imagev{
  51. width:100%;
  52. height:100%;
  53. }
  54. </style>