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

2020-07-23 00:08:46 +08:00
 Colorful

图片动态加载的问题。 地址是这样的,在 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 动态也一样会的报错

头一次碰到这种问题。

是新建的一个项目。

2016 次点击
所在节点    前端开发
10 条回复
kaiki
2020-07-23 00:12:07 +08:00
我猜是防盗链
jugelizi
2020-07-23 00:14:16 +08:00
你图片和 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 涨知识了,太感谢

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/692352

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX