- 29
- 0
Wordpress, 购买的国外的模板,用常规图片格式是没问题的,但是用插件生成了WEBP格式图片,其他都正常,就这两个部分有问题! 因为wordpress本身不支持webp,所以那些模板作者也不提供支持,只能到这来问了!
以下LOGO部分,重复显示了webp 和 png 的LOGO (即同时显示了两张图)
<picture class="normal-logo">
<source type="image/webp" srcset="https://www.xxx.com/wp-content/uploads/2018/08/logo-3.png.webp"/>
<img src="https://www.xxx.com/wp-content/uploads/2018/08/logo-3.png" alt="xxx"/>
</picture>
以下一个区块的内容,图片不显示:(空白,不显示)
<picture class="img bg-image">
<source type="image/webp" srcset="https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1.jpg.webp 580w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-150x150.jpg.webp 150w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-320x320.jpg.webp 320w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-100x100.jpg.webp 100w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-40x40.jpg.webp 40w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-500x500.jpg.webp 500w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-30x30.jpg.webp 30w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-550x550.jpg.webp 550w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-32x32.jpg.webp 32w" sizes="(max-width: 580px) 100vw, 580px">
<img width="580" height="580" src="https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1.jpg" alt="xxx Creative Life Store - Live A Creative Life with xxx!" srcset="https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1.jpg 580w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-150x150.jpg 150w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-320x320.jpg 320w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-100x100.jpg 100w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-40x40.jpg 40w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-500x500.jpg 500w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-30x30.jpg 30w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-550x550.jpg 550w, https://www.xxx.com/wp-content/uploads/2018/08/super3-banner-bg-1-32x32.jpg 32w" sizes="(max-width: 580px) 100vw, 580px">
</picture>
网站地址没放! 通过代码好像没看出哪有问题,出现这问题是为什么呢 ?
- 共 0 条
- 全部回答
-
心痛的网名繁体字 普通会员 1楼
WebP格式是一种图片格式,与CSS中的Picture标签有关系,但是当CSS中的Picture标签出现问题时,可能会导致图片重复或者不显示的问题。
图片重复的原因可能有以下几点:
-
CSS图片样式问题:如果图片的CSS样式设置错误,可能会导致图片重复显示。例如,图片的宽度设置得过小或者过大,或者图片的背景颜色设置得不正确,都会导致图片重复显示。
-
图片路径问题:如果图片的路径设置错误,可能会导致图片重复显示。例如,图片的路径写成了相对路径,而实际图片的文件路径是相对或绝对路径,就会导致图片重复显示。
-
图片尺寸问题:如果图片的尺寸设置得过小或者过大,可能会导致图片重复显示。例如,图片的宽度设置得过小,图片的高度设置得过大,都会导致图片重复显示。
-
图片文件问题:如果图片文件的格式不正确,可能会导致图片重复显示。例如,图片文件的格式是.png,而实际图片的格式是.webp,就会导致图片重复显示。
解决图片重复问题的方法主要有以下几点:
-
检查CSS图片样式和路径:确保图片的样式和路径设置正确,避免图片重复显示。
-
检查图片尺寸:确保图片的尺寸设置正确,避免图片重复显示。
-
检查图片文件格式:确保图片的文件格式正确,避免图片重复显示。
-
使用专门的工具检查:可以使用专门的图片压缩工具,检查图片的重复问题。
-
使用浏览器的开发者工具:可以使用浏览器的开发者工具,检查图片的重复问题。
-
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
