69 lines
1.7 KiB
Vue
69 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: ['result'],
|
|
|
|
data: function () {
|
|
return {
|
|
imgWidth: 1,
|
|
imgHeight: 1,
|
|
imgError: false,
|
|
}
|
|
},
|
|
methods: {
|
|
onImgError() {
|
|
this.imgError = true;
|
|
},
|
|
loadImage(img) {
|
|
if(this.$parent.$refs.rImageContainer) {
|
|
var maxH = this.$parent.$refs.rImageContainer.clientHeight;
|
|
var maxW = this.$parent.$refs.rImageContainer.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.result.rel_pictures[0]){
|
|
return (this.imgError) ? this.getDefaultMPImage(this.result.modell_kategorie) : this.marktplatzCDNPath(this.result.ident_nr_kunde, this.result.ident_nr_standort) + this.result.rel_pictures[0]['datei'];
|
|
}else{
|
|
return this.getDefaultMPImage(this.result.modell_kategorie);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |