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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1590 天前的主题，其中的信息可能已经有所发展或是发生改变。

图片动态加载的问题。地址是这样的，在 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

2020-07-23 00:12:07 +08:00

我猜是防盗链

jugelizi

2020-07-23 00:14:16 +08:00 via iPhone

你图片和 vue 有啥关系

Colorful

2020-07-23 10:12:32 +08:00

@kaiki 有解决办法吗？

Colorful

2020-07-23 10:13:09 +08:00

@jugelizi 我只是把问题列出来

Colorful

2020-07-23 10:15:31 +08:00

@kaiki 太感谢了，找到解决办法了
<meta name="referrer" content="no-referrer">
这样就解决了

kaiki

2020-07-23 10:18:24 +08:00

@Colorful 两种办法，第一种就是图片源改为自己本地的，第二种就是破解防盗链。
第一种不多说了，第二种看情况选择：
1.meta 的 referer 取消来源跟踪，这样一般的防盗链就无法得知来源，基本会放行，如微博的图片。
2.用跳板。创建一个隐藏的 iframe，把图片在里面打开，加载完毕后页面再输出图片，未加载完毕用 lazyload 代替
3.服务器来执行类似 1+2 的操作取回图片直接输出

Colorful

2020-07-23 11:40:14 +08:00

@kaiki
1.meta 的 referer 取消来源跟踪，这样一般的防盗链就无法得知来源，基本会放行，如微博的图片。
2.用跳板。创建一个隐藏的 iframe，把图片在里面打开，加载完毕后页面再输出图片，未加载完毕用 lazyload 代替

这两个我能够理解。
3.服务器来执行类似 1+2 的操作取回图片直接输出。这点，我不太理解。

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

2020-08-07 15:00:37 +08:00

@Colorful #7 由于前端受浏览器安全策略限制，因此不能伪造部分与安全相关的 http heaer，比如 host 。
因此放到连服务器可以通过这类 header 来禁止访问。
但是后端的 header 是可以随意编辑的，因此可以伪造 header 骗过对方服务器

Colorful

2020-08-10 16:38:14 +08:00

@flowfire 涨知识了，太感谢