我使用适用于手机设备的 avif 格式重构了我的应用程序（即使并非所有地方都支持）。

此代码完美运行，如果浏览器支持，它会优先考虑 avif 格式：

<picture>
   <source srcset="image.avif" media="(max-width:500px)" type="image/avif" />
   <img src="image.jpg" alt="nice dog" />
</picture>

但我也得到了一些图像作为background-imagecss 属性。我尝试了image-set属性但没有成功。

div {
  background-image: -webkit-image-set(
        url('image.avif') type("image/avif"),
        url('image.jpg') type("image/jpeg"));
  background-image: image-set(
        url('image.avif') type("image/avif"),
        url('image.jpg') type("image/jpeg"));
}

我在这里查看了示例 2 。即使 Firefox 或 Chrome 也不能很好地解释这段代码。任何想法 ？我是否正在尝试一些仍处于浏览器草案中的东西？

语境

我有一个pages像这样的结构文件夹：

pages/
--| home.vue
--| index.vue
--| countries
----| countriesChildren

我的索引 vue 看起来像这样：

pages/
--| home.vue
--| index.vue
--| countries
----| countriesChildren

问题

问题是当用户转到 时my-site.com/，他们会转到 index.vue 但没有要显示的默认页面。
我想给他们现在位于的主页/home

我可以将用户重定向/到 ，/home但我不确定这是更简洁的方式：/
最佳配置是：/是没有/home路径的主页。

结构将是：

/-> 主页
/countries-> 国家列表
/countries/country-> 国家
等