我爱自学

 找回密码
 会员注册

QQ登录

只需一步,快速开始

通过网络图片上传到discuz的图片 手机端默认宽度224

使用Discuz系统发布帖子文章时,为了节省服务器空间,引用了之前文章中的图片地址。本文分享,Discuz引用之前的文章图片,手机端图片显示变小的解决方法。
如下图所示,将网站中已经存在的图片地址添加到新文章,图片存储到数据库里面是UBB img标签带长和高的属性。
PC端访问的时候,图片尺寸显示正常,但是手机端访问时,img标签中width和height被计算小了。

通过网络图片上传到discuz的图片 手机端默认宽度224

通过网络图片上传到discuz的图片 手机端默认宽度224


数据库中图片存储样式,[img=422,361]

discuz引用网络图片 移动端宽度224

discuz引用网络图片 移动端宽度224


处理分析方法:
1、手动将数据库ubb img标签的width和height属性取消,然后保存,再访问手机端内容时,图片显示就正常了。

2、discuz发布网络图片时,无论上传图片URL是否带有WWW,均为自动带上Width和Height属性。   
查看网络图片上传的代码,发现有onchange='loadimgsize(this.value)'的js,该代码在网络图片地址输入框有变化时,会自动获取网络图片的尺寸。 小编亲测,只要是正确的图片资源URL,都能获取到width和height。

discuz上传网络图片url

discuz上传网络图片url


loadimgsize(this.value)相关代码
  1. function loadimgsize(imgurl, editor, p) {
  2.         var editor = !editor ? editorid : editor;
  3.         var s = new Object();
  4.         var p = !p ? '_image' : p;
  5.         $(editor + p + '_param_2').value = '';
  6.         $(editor + p + '_param_3').value = '';
  7.         s.img = new Image();
  8.         s.img.src = imgurl;
  9.         s.loadCheck = function () {
  10.                 if($(editor + p + '_param_1').value == imgurl) {
  11.                         if(s.img.complete) {
  12.                                 $(editor + p + '_param_2').value = s.img.width ? s.img.width : '';
  13.                                 $(editor + p + '_param_3').value = s.img.height ? s.img.height : '';
  14.                         } else {
  15.                                 setTimeout(function () {s.loadCheck();}, 100);
  16.                         }
  17.                 }
  18.         };
  19.         s.loadCheck();
  20. }
复制代码

编辑器图片尺寸带入相关的代码,在editor.js中
  1. case 'image':
  2.                                 var width = parseInt($(ctrlid + '_param_2').value);
  3.                                 var height = parseInt($(ctrlid + '_param_3').value);
  4.                                 var src = $(ctrlid + '_param_1').value;
  5.                                 var style = '';
  6.                                 if(wysiwyg) {
  7.                                         style += width ? ' width=' + width : '';
  8.                                         style += height ? ' _height=' + height : '';
  9.                                         var str = '<img src=' + src + style + ' border=0 />';
  10.                                         insertText(str, str.length, 0, false, sel);
  11.                                 } else {
  12.                                         style += width || height ? '=' + width + ',' + height : '';
  13.                                         insertText('[img' + style + ']' + squarestrip(src) + '[/img]', 0, 0, false, sel);
  14.                                 }
  15.                                 hideMenu('', 'win');
  16.                                 $(ctrlid + '_param_1').value = '';
  17.                                 break;
复制代码

编辑器上传完网络图片,html代码中是有width和Height的。Discuz通过bbcode编码,将html转换为bbcode,其中img html网页元素,通过bbcode.js中的function imgtag(attributes)函数,将图片元素提取为[img=422,361]的样式。


3、那么数据库中同样的数据,为什么PC端图片width较大,但是手机移动端图片width=‘224’。
游客,如果您要查看本帖隐藏内容请回复


discuz imagemaxwidth来源及修改方法



点击阅读更多内容!
如果您觉得文章内容帮助到了您,不妨点点感兴趣的广告。感谢您的支持!

微信扫一扫打赏

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

手机版|小黑屋|我爱自学 ( 蜀ICP备19015358号-3 )

GMT+8, 2024-4-20 19:11 , Processed in 0.067108 second(s), 58 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

本站大部分教程是网站原创教程,一部分教程为我爱自学(http://www.5izixue.com)编辑收集整理。

如果您需要转载我爱自学网站教程,请注明“资料来源:我爱自学(5izixue)”字样并注明本站网址。

编辑收集整理的教程版权归原作者所有,本站只提供网友交流学习使用,请勿用于商业用途,如果该文章有任何侵犯您权益的地方,请联系我们(569705694@qq.com),我们将在第一时间进行处理!谢谢您的支持!

快速回复 返回顶部 返回列表