V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Colorful
V2EX  ›  前端开发

前端碰到一个比较奇怪的问题。关于图片显示的

  •  
  •   Colorful · 2020-07-23 00:08:46 +08:00 · 1253 次点击
    这是一个创建于 496 天前的主题,其中的信息可能已经有所发展或是发生改变。

    图片动态加载的问题。 地址是这样的,在 http 里面直接打开的时候,另存的时候,有时候是 html 文件,有时候又是图片格式。

    http://qny.smzdm.com/202007/14/5f0d6e66496745249.jpg

    然后在 html 里面,有时候能够显示,有时又不能够显示。 在 html 里面是直接这样加载的,文件的后缀名是.html

    img src="http://qny.smzdm.com/202007/14/5f0d6e66496745249.jpg" /

    没有加<> 这两个,因为加了,在 V2 里面是显示不出来的

    有时能显示有时不能

    假如说在 vue 文件里面,一样的代码,是一直显示不了的。 试过用,require 以及 import 导入,都不行。 如果动态的话,加 require 它会报错。 import 动态也一样会的报错

    头一次碰到这种问题。

    是新建的一个项目。

    10 条回复    2020-08-10 16:38:14 +08:00
    kaiki
        1
    kaiki   2020-07-23 00:12:07 +08:00
    我猜是防盗链
    jugelizi
        2
    jugelizi   2020-07-23 00:14:16 +08:00 via iPhone
    你图片和 vue 有啥关系
    Colorful
        3
    Colorful   2020-07-23 10:12:32 +08:00
    @kaiki 有解决办法吗?
    Colorful
        4
    Colorful   2020-07-23 10:13:09 +08:00
    @jugelizi 我只是把问题列出来
    Colorful
        5
    Colorful   2020-07-23 10:15:31 +08:00
    @kaiki 太感谢了,找到解决办法了
    <meta name="referrer" content="no-referrer">
    这样就解决了
    kaiki
        6
    kaiki   2020-07-23 10:18:24 +08:00
    @Colorful 两种办法,第一种就是图片源改为自己本地的,第二种就是破解防盗链。
    第一种不多说了,第二种看情况选择:
    1.meta 的 referer 取消来源跟踪,这样一般的防盗链就无法得知来源,基本会放行,如微博的图片。
    2.用跳板。创建一个隐藏的 iframe,把图片在里面打开,加载完毕后页面再输出图片,未加载完毕用 lazyload 代替
    3.服务器来执行类似 1+2 的操作取回图片直接输出
    Colorful
        7
    Colorful   2020-07-23 11:40:14 +08:00
    @kaiki
    1.meta 的 referer 取消来源跟踪,这样一般的防盗链就无法得知来源,基本会放行,如微博的图片。
    2.用跳板。创建一个隐藏的 iframe,把图片在里面打开,加载完毕后页面再输出图片,未加载完毕用 lazyload 代替

    这两个我能够理解。
    3.服务器来执行类似 1+2 的操作取回图片直接输出 。 这点,我不太理解。
    kaiki
        8
    kaiki   2020-07-23 21:16:26 +08:00
    @Colorful 很久以前写的
    php
    <?php
    $url = $_GET["url"];
    $black_host = array('ws2.sinaimg.cn','ws3.sinaimg.cn','ws4.sinaimg.cn');//黑名单域名
    if(in_array(parse_url($url)['host'],$black_host)){
    echo 'The domain is in the blacklist';
    exit;
    }
    $dir = pathinfo($url);
    $host = $dir['dirname'];
    $refer = $host.'/';
    $ch = curl_init($url);
    curl_setopt ($ch, CURLOPT_REFERER, $refer);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);//激活可修改页面,Activation can modify the page
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_BINARYTRANSFER, 1);
    $data = curl_exec($ch);
    curl_close($ch);
    $ext = strtolower(substr(strrchr($img,'.'),1,10));
    $types = array(
    'gif'=>'image/gif',
    'jpeg'=>'image/jpeg',
    'jpg'=>'image/jpeg',
    'jpe'=>'image/jpeg',
    'png'=>'image/png',
    );
    $type = $types[$ext] ? $types[$ext] : 'image/jpeg';
    header("Content-type: ".$type);
    echo $data;
    ?>
    js
    function sinaimg() {
    $('img').each(function() {
    var domain = this.src.split('.');
    if(domain[1] == 'sinaimg'){
    img = new Image();
    img.src = this.src;
    if(img.complete||img.naturalWidth) {
    //已缓存
    }else{
    //未缓存
    this.src = '/sinaimg.php?url=' + this.src;//临时使用 php 来让图片显示
    var ifrid = 'ifr_' + Math.random().toString(36).substr(2);//随机生成一个 ID
    $('html').append('<iframe class="hide" src="" id ="' + ifrid +'"></iframe>');//创建一个 iframe
    $('#'+ifrid).attr('src','javascript:"<script>location.replace(\''+img.src+'\')<\/script>"');//让 iframe 打开指定 url
    }
    }
    });
    };
    flowfire
        9
    flowfire   2020-08-07 15:00:37 +08:00
    @Colorful #7 由于前端受浏览器安全策略限制,因此不能伪造部分与安全相关的 http heaer,比如 host 。
    因此放到连服务器可以通过这类 header 来禁止访问。
    但是后端的 header 是可以随意编辑的,因此可以伪造 header 骗过对方服务器
    Colorful
        10
    Colorful   2020-08-10 16:38:14 +08:00
    @flowfire 涨知识了,太感谢
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3794 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 06:47 · PVG 14:47 · LAX 22:47 · JFK 01:47
    ♥ Do have faith in what you're doing.