search

mipengine / mip

[Deprecated] 请查看 mip2
https://www.mipengine.org/
MIT License
380 stars 81 forks source link

picture标签下的img标签问题 #276

Closed JunIce closed 6 years ago

JunIce commented 6 years ago

代码片段

<!DOCTYPE html>
<html mip>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
    <link rel="canonical" href="https://www.mipengine.org/test_xxx.html">
    <script async src="https://mipcache.bdstatic.com/static/V1/mip-hIstory.js"></script>
    <title>MIP页Demo效果</title>
    <style mip-custom>
    </style>
</head>
    <body>
        <picture>
            <source type="image/webp"
                srcset="http://img2.woyaogexing.com/2018/01/29/3f4396fe3a0a1803!400x400_big.webp"
                >
              <img src="img/picture.png" alt="this is a picture">
        </picture>
        <picture>
            <source type="image/webp" srcset="http://img2.woyaogexing.com/2018/01/26/f68558a69f039159!400x400_big.webp">
            <img src="img/picture.png" alt="this is a picture">
        </picture>
        <script src="https://c.mipcdn.com/static/v1/mip.js" ></script>
    </body>
</html>

问题

picture 下的 img 标签验证不能通过， 采用官方标签 mip-img 不能识别webp格式图片

wupengFEX commented 6 years ago

@JunIce <mip-img> 是 <img> 的封装，原生标签支持什么他就支持什么。同时都已经使用了 <source> 为何还需要 <mip-img> 做 webp 识别呢？<mip-img> 应该是一个兜底的标签，比如，<picture> 里有 2 个 <source>，都是 webp 图片，如果都加载失败最后才会加载 <mip-img>（比如 <mip-img> 是 .png 的图片）。