在此上下文中，元素img不允许作为元素图片的子元素

Posted 2021-03-31

我的例子

<figure>
  <picture>
    <source media="(min-width: 1200px)" srcset="/images/main/main_visual_01_md.jpg">
    <source media="(min-width: 992px)" srcset="/images/main/main_visual_01_md.jpg">
    <source media="(min-width: 768px)" srcset="/images/main/main_visual_01.jpg">
    <source media="(min-width: 320px)" srcset="/images/main/main_visual_01.jpg">
    <img src="/images/main/main_visual_01_md.jpg" class="visible-md visible-lg" alt="샐러드 접시">
    <img src="/images/main/main_visual_01.jpg" class="visible-xs visible-sm" alt="샐러드 접시">
  </picture>
  <figcaption class="blind">치즈와 키토제닉 전용 빵이 들어간 샐러드 접시</figcaption>
</figure>

html5验证器说“在这种情况下，元素img不允许作为元素图片的子元素”。

你能帮助我吗？

答案

picture元素只能包含一个IMG元素。该错误是由于无关的孩子造成的。

这里有关于Picture元素的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture