bemarket/src/components/ResponsiveImage.vue
2022-02-16 11:51:05 +08:00

48 lines
828 B
Vue

<template>
<img
:src="normalImg"
:srcset= "normalImg + ' 1x,' + img2x + ' 2x,' + img3x + ' 3x'"
alt=""
/>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
declare module 'vue/types/vue' {
interface Vue {
imgName: string
subPath: string
}
}
@Component({
name: 'RImg',
components: {},
props: ['imgName', 'subPath']
})
export default class extends Vue {
get srcset() {
let result = ''
result += 're'
return result
}
get normalImg() {
return require(`@/assets/${this.subPath}/${this.imgName}.png`)
}
get img2x() {
return require(`@/assets/${this.subPath}/${this.imgName}@2x.png`)
}
get img3x() {
return require(`@/assets/${this.subPath}/${this.imgName}@3x.png`)
}
}
</script>
<style lang="scss" scoped>
</style>