0

I want to programmatically add a class to an image if the image is portrait or landscape, the code that I have for now works fine if and the image is png or jpg but if the image source is SVG then it returns 0 for both width and height.

Is there any lightweight solution to support SVG type?

Here is my code:

<template>
    <img class="header__logo" v-bind:class="[imageOrientation]" :src="Logo.primaryLogo" />
</template>

<script>
import Logo from "~/data/Logo.yml";

export default {
    name: "FsHeaderLogo",
    computed: {
        Logo() {
            return Logo;
        },
        imageOrientation() {
            let img = new Image();
            img.src = this.Logo.primaryLogo; // This will be the svg
            console.log(img);
            var width = img.width;
            console.log(width);
            var height = img.height;
            console.log(height);
            height = height + height;

            if (width > height) {
                return "header__logo--landscape";
            } else {
                return "header__logo--portrait";
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.header__logo {

    &--portrait {
        height: 100%;
        max-height: 96px;

        @include mediaQuery("tablet") {
            height: 100%;
            max-height: 144px;
        }
    }

    &--landscape {
        width: 100%;
        max-width: 96px;

        @include mediaQuery("tablet") {
            width: 100%;
            max-width: 144px;
        }
    }
}
</style>
Milos Vujinic
  • 67
  • 8
  • What SVG image? Maybe it doesn't actually have a width and height? – Robert Longson Dec 28 '19 at 16:18
  • @RobertLongson You were right, the logo was exported from adobe illustrator and it didn't have w/h attributes when I added them manually it works like a charm. I will just create a fallback when it can't read w/h. – Milos Vujinic Dec 28 '19 at 21:27

0 Answers0