app-img.vue 911 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <block>
  3. <!-- #ifdef H5 -->
  4. <img class="app-img" v-lazy="src" :alt="alt" :title="title" :mode="mode" />
  5. <!-- #endif -->
  6. <!-- #ifndef H5 -->
  7. <image
  8. class="app-img"
  9. :src="src"
  10. :alt="alt"
  11. :title="title"
  12. :lazy-load="true"
  13. :mode="mode"
  14. :style="{height: height + 'rpx'}" ></image>
  15. <!-- #endif -->
  16. </block>
  17. </template>
  18. <script>
  19. import Vue from 'vue'
  20. import VueLazyload from 'vue-lazyload'
  21. Vue.use(VueLazyload)
  22. export default {
  23. name: 'app-img',
  24. props: {
  25. src: {
  26. type: String,
  27. default: ''
  28. },
  29. alt: {
  30. type: String,
  31. default: ''
  32. },
  33. title: {
  34. type: String,
  35. default: ''
  36. },
  37. // #ifdef H5
  38. mode: {
  39. type: String,
  40. default: 'scaleToFill'
  41. },
  42. // #endif
  43. // #ifndef H5
  44. mode: {
  45. type: String,
  46. default: 'widthFix'
  47. },
  48. // #endif
  49. height: {
  50. type: Number,
  51. default: 346
  52. }
  53. }
  54. }
  55. </script>
  56. <style lang="scss" scoped>
  57. </style>