因为一些数据是从网上爬下来的，而在前端直接通过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替换成<a href="https://link.segmentfault.com/?enc=ch2Qx7Oii7M2qmq%2FST364w%3D%3D.8vQJBMo2JG2jUGCzARYRkPKnGNwMd8knKQlzGmL4fka9qXtc5WhGE8buu%2BGUeMbUuccnDd73M6RlorFlUlDFnBs6gUJ0yfAdwwVV1P%2FHb0AxJHIbNgSC%2F8TyhnsFRg5%2Bd0lD5lh5adMjZDi4c5I5mkS%2BK1M58lL5Kypddlss7OrYC36Z7c%2Ff9NQlhNl5Cf%2BU2%2BldQdN17ur4lwzAvDe0vPJpae0e%2Bb0dmcNOEpVND58szXkWNgJAEKWJbftb6xz7IIU5fGUpuEV2QEBaUYFF%2BOcxkQmQJVWQMMvH5Ihon2E%3D" rel="nofollow" target="_blank">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()} );并没有用

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

发布于
2017-08-09

因为一些数据是从网上爬下来的，而在前端直接通过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()});并没有用

html5 javascript html css

阅读 7.5k

3 个回答

JasonTy

某熊猫桑

✓ 已被采纳

直接上代码和效果:

     <!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>