VueJs中使用jquery动态设置img的src属性无效

因为一些数据是从网上爬下来的,而在前端直接通过v-html来进行显示,因为数据是爬下来的,所以像图片之类的连接原来是进行了防盗链的。原来图片的结构为:

<img data-s="300,640" data-type="png" data-src="http://mmbiz.qpic.cn/mmbiz_png/fhujzoQe7TqnNMYrica7wsfH1OAnnMwtBxrZliayhZLzpcic5Y4x2EuWh9ToqZybGDo4vAoSuZ4dmKJSsib9AckzkQ/0?wx_fmt=png" class="img_loading" data-ratio="0.3723404255319149" data-w="752" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" style="width: 370px !important; height: 137.7659574468085px !important;">

在网上查了下资料,可以通过跳板的形式来解决这个显示的问题,比如:链接描述

最后的想法是,用正则匹配所有的img,如果有data-src属性,就将原来的src替换成http://read.html5.qq.com/imag...
这样直接访问,图片是出来了,但是使用jquery来进行操作却没有任何效果,代码如下:

 filterData(content){
            var reg = /<img[^>]*>/gi;
            let imags = content.match(reg);
            for(let ietm of imags){
              let getImgs = $(ietm).data("src");
              if(getImgs!=="undefined"){
                $(ietm).attr('src',`http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=${getImgs}?=&${Math.random()}`);
                console.log("ssssssssss:",$(ietm));
              }
            }
          },

发现 $(ietm).attr('src',http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=${getImgs}?=&${Math.random()});并没有用

阅读 7.5k
3 个回答

直接上代码和效果:

     <!DOCTYPE html>
     <html lang="en">
    <head v-html="meta">
    <title>hello</title>
    <script src="./jquery-3.2.1.min.js"></script>
    </head>
    <body>
    <div style="height:auto;width:120px" id="demo">
    </div>
    <script type="text/javascript">
       function filterData(content){
            var reg = /<img[^>]*>/gi;
            let imags = content.match(reg);
           
            for(let ietm of imags){
              let getImgs = $(ietm).attr("src");
              if(getImgs!=="undefined"){

                var newietm = $(ietm).attr('src',`http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=http://mmbiz.qpic.cn/mmbiz_png/fhujzoQe7TqnNMYrica7wsfH1OAnnMwtBxrZliayhZLzpcic5Y4x2EuWh9ToqZybGDo4vAoSuZ4dmKJSsib9AckzkQ/0?wx_fmt=png`);
                 $('#demo').html(newietm);
              }
            }
        }
        var test = '<img data-s="300,640" data-type="png" data-src="http://mmbiz.qpic.cn/mmbiz_png/fhujzoQe7TqnNMYrica7wsfH1OAnnMwtBxrZliayhZLzpcic5Y4x2EuWh9ToqZybGDo4vAoSuZ4dmKJSsib9AckzkQ/0?wx_fmt=png" class="img_loading" data-ratio="0.3723404255319149" data-w="752" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" style="width: 370px !important; height: 137.7659574468085px !important;">'
         filterData(test);
        </script>
        </body>
    </html>
![图片描述][1]

[1]: /img/bVSxDN

这样用正则匹配出来的只是img元素所对应的string,在$(ietm)时可能就错误了。
clipboard.png
既然用的jq,不如直接$("img"),然后遍历所有获得到的img元素更换src.

为什么不用 :src

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题