浏览网页隐藏图片 html,网页中图片不显示问题

问题描述

网页展示时，图片不显示。其实图片已经上传到服务器，通过ftp也能够下载图片

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

界面的代码如下：

商品类目:	选择类目
商品标题:
商品卖点:
商品价格:
库存数量:
条形码:
商品图片:	上传图片
商品描述:
商品规格:

提交

重置

var itemAddEditor ;

//页面初始化完毕后执行此方法

$(function(){

//创建富文本编辑器

itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");

//itemAddEditor = KindEditor.create("#itemAddForm [name=desc]", TT.kingEditorParams);

//初始化类目选择和图片上传器

TAOTAO.init({fun:function(node){

//根据商品的分类id取商品 的规格模板，生成规格信息。第四天内容。

TAOTAO.changeItemParam(node, "itemAddForm");

}});

});

//提交表单

function submitForm(){

//有效性验证

if(!$('#itemAddForm').form('validate')){

$.messager.alert('提示','表单还未填写完成!');

return ;

}

//取商品价格，单位为“分”

$("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);

//同步文本框中的商品描述

itemAddEditor.sync();

//取商品的规格

var paramJson = [];

$("#itemAddForm .params li").each(function(i,e){

var trs = $(e).find("tr");

var group = trs.eq(0).text();

var ps = [];

for(var i = 1;i

var tr = trs.eq(i);

ps.push({

"k" : $.trim(tr.find("td").eq(0).find("span").text()),

"v" : $.trim(tr.find("input").val())

});

}

paramJson.push({

"group" : group,

"params": ps

});

});

//把json对象转换成字符串

paramJson = JSON.stringify(paramJson);

$("#itemAddForm [name=itemParams]").val(paramJson);

//ajax的post方式提交表单

//$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串

$.post("/item/save",$("#itemAddForm").serialize(), function(data){

if(data.status == 200){

$.messager.alert('提示','新增商品成功!');

}

});

}

function clearForm(){

$('#itemAddForm').form('reset');

itemAddEditor.html('');

}

js的代码如下：

Date.prototype.format = function(format){

var o = {

"M+" : this.getMonth()+1, //month

"d+" : this.getDate(), //day

"h+" : this.getHours(), //hour

"m+" : this.getMinutes(), //minute

"s+" : this.getSeconds(), //second

"q+" : Math.floor((this.getMonth()+3)/3), //quarter

"S" : this.getMilliseconds() //millisecond

};

if(/(y+)/.test(format)){

format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));

}

for(var k in o) {

if(new RegExp("("+ k +")").test(format)){

format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));

}

}

return format;

};

var TT = TAOTAO = {

// 编辑器参数

kingEditorParams : {

//指定上传文件参数名称

filePostName : "uploadFile",

//指定上传文件请求的url。

uploadJson : '/pic/upload',

//上传类型，分别为image、flash、media、file

dir : "image"

},

// 格式化时间

formatDateTime : function(val,row){

var now = new Date(val);

return now.format("yyyy-MM-dd hh:mm:ss");

},

// 格式化连接

formatUrl : function(val,row){

if(val){

return "查看";

}

return "";

},

// 格式化价格

formatPrice : function(val,row){

return (val/1000).toFixed(2);

},

// 格式化商品的状态

formatItemStatus : function formatStatus(val,row){

if (val == 1){

return '正常';

} else if(val == 2){

return '下架';

} else {

return '未知';

}

},

init : function(data){

// 初始化图片上传组件

this.initPicUpload(data);

// 初始化选择类目组件

this.initItemCat(data);

},

// 初始化图片上传组件

initPicUpload : function(data){

$(".picFileUpload").each(function(i,e){

var _ele = $(e);

_ele.siblings("div.pics").remove();

_ele.after('\

\

');

// 回显图片

if(data && data.pics){

var imgs = data.pics.split(",");

for(var i in imgs){

if($.trim(imgs[i]).length > 0){

_ele.siblings(".pics").find("ul").append("

");

}

}

}

//给“上传图片按钮”绑定click事件

$(e).click(function(){

var form = $(this).parentsUntil("form").parent("form");

//打开图片上传窗口

KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){

var editor = this;

editor.plugin.multiImageDialog({

clickFn : function(urlList) {

var imgArray = [];

KindEditor.each(urlList, function(i, data) {

imgArray.push(data.url);

form.find(".pics ul").append("

");

});

form.find("[name=image]").val(imgArray.join(","));

editor.hideDialog();

}

});

});

});

});

},

// 初始化选择类目组件

initItemCat : function(data){

$(".selectItemCat").each(function(i,e){

var _ele = $(e);

if(data && data.cid){

_ele.after(""+data.cid+"");

}else{

_ele.after("");

}

_ele.unbind('click').click(function(){

$("

").css({padding:"5px"}).html("

• ")

.window({

width:'500',

height:"450",

modal:true,

closed:true,

iconCls:'icon-save',

title:'选择类目',

onOpen : function(){

var _win = this;

$("ul",_win).tree({

url:'/item/cat/list',

animate:true,

onClick : function(node){

if($(this).tree("isLeaf",node.target)){

// 填写到cid中

_ele.parent().find("[name=cid]").val(node.id);

_ele.next().text(node.text).attr("cid",node.id);

$(_win).window('close');

if(data && data.fun){

data.fun.call(this,node);

}

}

}

});

},

onClose : function(){

$(this).window("destroy");

}

}).window('open');

});

});

},

createEditor : function(select){

return KindEditor.create(select, TT.kingEditorParams);

},

/**

* 创建一个窗口，关闭窗口后销毁该窗口对象。

*

* 默认：

* width : 80%

* height : 80%

* title : (空字符串)

*

* 参数：

* width :

* height :

* title :

* url : 必填参数

* onLoad : function 加载完窗口内容后执行

*

*

*/

createWindow : function(params){

$("

").css({padding:"5px"}).window({

width : params.width?params.width:"80%",

height : params.height?params.height:"80%",

modal:true,

title : params.title?params.title:" ",

href : params.url,

onClose : function(){

$(this).window("destroy");

},

onLoad : function(){

if(params.onLoad){

params.onLoad.call(this);

}

}

}).window("open");

},

closeCurrentWindow : function(){

$(".panel-tool-close").click();

},

changeItemParam : function(node,formId){

$.getJSON("/item/param/query/itemcatid/" + node.id,function(data){

if(data.status == 200 && data.data){

$("#"+formId+" .params").show();

var paramData = JSON.parse(data.data.paramData);

var html = "

• ";

for(var i in paramData){

var pd = paramData[i];

html+="

html+="

"+pd.group+"";

for(var j in pd.params){

var ps = pd.params[j];

html+="

"+ps+": ";

}

html+="

";

}

html+= "

";

$("#"+formId+" .params td").eq(1).html(html);

}else{

$("#"+formId+" .params").hide();

$("#"+formId+" .params td").eq(1).empty();

}

});

},

getSelectionsIds : function (select){

var list = $(select);

var sels = list.datagrid("getSelections");

var ids = [];

for(var i in sels){

ids.push(sels[i].id);

}

ids = ids.join(",");

return ids;

},

/**

* 初始化单图片上传组件

* 选择器为：.onePicUpload

* 上传完成后会设置input内容以及在input后面追加

*/

initOnePicUpload : function(){

$(".onePicUpload").click(function(){

var _self = $(this);

KindEditor.editor(TT.kingEditorParams).loadPlugin('image', function() {

this.plugin.imageDialog({

showRemote : false,

clickFn : function(url, title, width, height, border, align) {

var input = _self.siblings("input");

input.parent().find("img").remove();

input.val(url);

input.after("");

this.hideDialog();

}

});

});

});

}

};

你期待的结果是什么？实际看到的错误信息又是什么？

不清楚ftp服务器是怎么样的，要怎样才能正常展示

正常情况下，在页面可以看到图片，