71 lines
1.7 KiB
Vue
71 lines
1.7 KiB
Vue
<template>
|
|
<img
|
|
class=""
|
|
:src="filename"
|
|
:width="imgW"
|
|
:height="imgH"
|
|
@load="loadImage"
|
|
@error="onImgError()"
|
|
>
|
|
</template>
|
|
|
|
<script>
|
|
import PathMixin from '../mixins/PathMixin.js'
|
|
import defaultImageMixin from '../mixins/defaultImageMixin.js'
|
|
|
|
export default {
|
|
mixins: [PathMixin, defaultImageMixin],
|
|
props: ['details', 'imgOffset', 'container'],
|
|
|
|
data: function () {
|
|
return {
|
|
imgWidth: 1,
|
|
imgHeight: 1,
|
|
imgError: false,
|
|
}
|
|
},
|
|
methods: {
|
|
onImgError() {
|
|
this.imgError = true;
|
|
},
|
|
loadImage(img) {
|
|
var c = this.$parent.$refs[this.container];
|
|
if(Array.isArray(c)) {
|
|
c = c[0];
|
|
}
|
|
var maxH = c.clientHeight;
|
|
var maxW = c.clientWidth;
|
|
var imgW = img.srcElement.naturalWidth;
|
|
var imgH = img.srcElement.naturalHeight;
|
|
var t1 = maxW / imgW;
|
|
var t2 = maxH / imgH;
|
|
if(t1 > t2) {
|
|
this.imgWidth = imgW * t2;
|
|
this.imgHeight = imgH * t2;
|
|
}else{
|
|
this.imgWidth = imgW * t1;
|
|
this.imgHeight = imgH * t1;
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
},
|
|
computed: {
|
|
imgW: function() {
|
|
return this.imgWidth;
|
|
},
|
|
imgH: function() {
|
|
return this.imgHeight;
|
|
},
|
|
pSize() {
|
|
},
|
|
filename() {
|
|
if(this.details.pictures[this.imgOffset]){
|
|
return (this.imgError) ? this.getDefaultImage(this.details.modell_kategorie) : this.adCDNPath(this.details.ident_nr_kunde, this.details.ident_nr_standort) + this.details.pictures[this.imgOffset]['datei'];
|
|
}else{
|
|
return this.getDefaultImage(this.details.modell_kategorie);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |