Html Vue组件：使用<；图片>；元素不'；我不能正常工作

我尝试在HTML5的Vue组件中使用“picture”元素，使旧浏览器加载更大的.jpg文件，而不是像Chrome和Firefox这样的新浏览器加载更小的.webp文件

问题是，在不支持.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>

导出默认值{
名称：“索引”，
道具：{
},
数据（）{
返回{
纯HTML：`
` 
}
},
}

但我认为这种方法不是正确的方法。在较大的组件文件上，这会变得凌乱，并且在代码方面看起来很糟糕。

---

还有其他方法吗？

你确定

是有效的html吗？@kerbholz-Ups是的，我似乎复制了错误的东西。编辑它。谢谢！你确定
是有效的html吗？@kerbholz-Ups是的，我好像复制了错误的东西。编辑它。谢谢！