Vue Компоненты: использование элемента <picture>не работает должным образом - PullRequest
Новая
       3

Vue Компоненты: использование элемента <picture>не работает должным образом

1 голос
/ 01 апреля 2020

Я пытался использовать элемент «picture» в Vue компоненте HTML5, чтобы старые браузеры загружали больший файл .jpg вместо меньшего .webp файл для более новых браузеров, таких как Chrome и Firefox.

. Проблема в том, что после загрузки страницы в браузерах без поддержки .webp изображений изображение вообще не отображается. После проверки кода в браузере я увидел, что Vue удалил элемент «picture» и вместо него вставил элемент «img».

Вот код, который имеет такое поведение: 

<template>
    <div class="container-fluid">
        <picture style="opacity:0.4">
            <source 
                type="image/webp" 
                sizes="width:100% height:12%" 
                srcset="images/background-image-200.webp 3840w 200h">
            <img 
                src="images/background-image-200.jpg"
                sizes="width:100% height:12%">
        </picture>   
    </div>    
</template>

Я нашел обходной путь для этого, заставив Vue использовать обычный HTML следующим образом: 

<template>
    <div class="container-fluid">
        <div v-html="plainhtml"></div>
    </div>    
</template>

<script>
export default {
    name:"index" ,
    props: {

    },
    data () {
      return {
         plainhtml: `
            <picture style="opacity:0.4">
                <source 
                    type="image/webp" 
                    sizes="width:100% height:12%" 
                    srcset="images/background-image-200.webp 3840w 200h">
                <img 
                    src="images/background-image-200.jpg"
                    sizes="width:100% height:12%">
            </picture>    
         ` 
      }
    },

}
</script>

Но я думаю, что этот метод не является правильным способом сделать это. На больших файлах компонентов это только запутывается и выглядит плохо с точки зрения кода. Есть ли другой способ сделать это?

...