如何用style替换img标签

类别：FRONTEND / 前端 / 日期：2020-04-27 / 浏览：1600 / 评论：3

    昨晚逛逛zblog社区，发现有人上传灯箱插件，刚好最近博客准备上个灯箱插件，顺带就测试一下JS兼容性如何...

    实测下来有两个问题，一个是移动端图片左右挪动的时候会产生错误提示，好在PC端不会出现问题，激发不了我的强迫症...

    另外一个问题把带URL的缩略图也换上了灯箱，这就有点蛋疼了。这里有两种选择，一是等作者后期更新插件，二是自己想办法替换IMG标签，使这个JS识别不到URL，自然就无法完成灯箱效果的操作。

    我们先说说第一种，作者后期更新的话，要么就是在程序中加入IF判断当前IMG标签闭合，包括上级标签闭合项内是否包含href属性，如果是则关闭效果，如果不是则开启效果。要么就是加入一个类似onclick事件，如果当前标签包含onclick则关闭效果，如果不是则开启效果。不管是哪一种，都是需要加入判断语句的，所以预估作者修改起来也是要不少时间的，所以我们只能考虑第二种。

    第二种方法就是替换img标签，把图片通过内链的形式避开JS识别，这里也有两种选择，一种是写入html里面，一种是写入class里面，因为我使用的是缩略图插件，无法在CSS里面自动生成URL，因此只能直接写入html里面。首先我们来看一下原本的代码

    <li class="widget-user media">
     <a class="pull-left" href="{$hotlist.Url}">
      <img class="media-object avatar-40" src="{$src}" alt="{$hotlist.Title}"/></a>
       <div class="media-object">
        <strong><a href="{$hotlist.Url}" title="{$hotlist.Title}">{$hotlist.Title}</a></strong>
        <p class="text-muted">浏览：{$hotlist.ViewNums}{if $hotlist->CommNums} / 评论：{$hotlist.CommNums}{/if}</p>
      </div>
    </li>

    很明显这里使用了img标签，所以灯箱自动就识别了，这种情况下我们将img替换做a，然后再把src属性替换为style属性，内链方式如下

background-image: url({$article.Author.Avatar});  //图片地址
display: inline-block;  //同行显示
background-repeat: no-repeat;   //不换行
background-size: cover;  //自动识别缩放

    这样基本上就可以恢复img标签原本的效果了，以下是我修改后的代码

    <li class="widget-user media">
     <a class="pull-left media-object avatar-40" style="background-image: url({$src}); display: inline-block;background-repeat: no-repeat;background-size: cover;" href="{$hotlist.Url}"></a>
      <div class="media-object"><strong>
       <a href="{$hotlist.Url}" title="{$hotlist.Title}">{$hotlist.Title}</a></strong>
        <p class="text-muted">浏览：{$hotlist.ViewNums}{if $hotlist->CommNums} / 评论：{$hotlist.CommNums}{/if}</p>
      </div>
    </li>

    由于上级也是用的a来做的闭合，所以我这边直接将样式合并在一起了。background标签还有其他的选项，但是并不是所有浏览器都能兼容的，具体的请参考官方说明吧。

    最后感谢一下插件作者，省的我去github一个个测试了。 @包子铺博客

赞助