网页中图片不显示问题

五姐
  • 0
新手上路,请多包涵

问题描述

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

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

clipboard.png

clipboard.png

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
界面的代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/common.js"></script>

<div style="padding:10px 10px 10px 10px">

<form id="itemAddForm" class="itemForm" method="post">
    <table cellpadding="5">
        <tr>
            <td>商品类目:</td>
            <td>
                <a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>
                <input type="hidden" name="cid" style="width: 280px;"></input>
            </td>
        </tr>
        <tr>
            <td>商品标题:</td>
            <td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td>
        </tr>
        <tr>
            <td>商品卖点:</td>
            <td><input class="easyui-textbox" name="sellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td>
        </tr>
        <tr>
            <td>商品价格:</td>
            <td><input class="easyui-numberbox" type="text" name="priceView" data-options="min:1,max:99999999,precision:2,required:true" />
                <input type="hidden" name="price"/>
            </td>
        </tr>
        <tr>
            <td>库存数量:</td>
            <td><input class="easyui-numberbox" type="text" name="num" data-options="min:1,max:99999999,precision:0,required:true" /></td>
        </tr>
        <tr>
            <td>条形码:</td>
            <td>
                <input class="easyui-textbox" type="text" name="barcode" data-options="validType:'length[1,30]'" />
            </td>
        </tr>
        <tr>
            <td>商品图片:</td>
            <td>
                 <a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上传图片</a>
                 <input type="hidden" name="image"/>
            </td>
        </tr>
        <tr>
            <td>商品描述:</td>
            <td>
                <textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>
            </td>
        </tr>
        <tr class="params hide">
            <td>商品规格:</td>
            <td>
                
            </td>
        </tr>
    </table>
    <input type="hidden" name="itemParams"/>
</form>
<div style="padding:5px">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
</div>

</div>
<script type="text/javascript">

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<trs.length;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('');
}

</script>

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 "<a href='"+val+"' target='_blank'>查看</a>";            
    }
    return "";
},
// 格式化价格
formatPrice : function(val,row){
    return (val/1000).toFixed(2);
},
// 格式化商品的状态
formatItemStatus : function formatStatus(val,row){
    if (val == 1){
        return '正常';
    } else if(val == 2){
        return '<span style="color:red;">下架</span>';
    } 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('\
            <div class="pics">\
                <ul></ul>\
            </div>');
        // 回显图片
        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("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>");
                }
            }
        }
        //给“上传图片按钮”绑定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("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");
                        });
                        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("<span style='margin-left:10px;'>"+data.cid+"</span>");
        }else{
            _ele.after("<span style='margin-left:10px;'></span>");
        }
        _ele.unbind('click').click(function(){
            $("<div>").css({padding:"5px"}).html("<ul>")
            .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);
},

/**
 * 创建一个窗口,关闭窗口后销毁该窗口对象。<br/>
 * 
 * 默认:<br/>
 * width : 80% <br/>
 * height : 80% <br/>
 * title : (空字符串) <br/>
 * 
 * 参数:<br/>
 * width : <br/>
 * height : <br/>
 * title : <br/>
 * url : 必填参数 <br/>
 * onLoad : function 加载完窗口内容后执行<br/>
 * 
 * 
 */
createWindow : function(params){
    $("<div>").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 = "<ul>";
             for(var i in paramData){
                 var pd = paramData[i];
                 html+="<li><table>";
                 html+="<tr><td colspan=\"2\" class=\"group\">"+pd.group+"</td></tr>";
                 
                 for(var j in pd.params){
                     var ps = pd.params[j];
                     html+="<tr><td class=\"param\"><span>"+ps+"</span>: </td><td><input autocomplete=\"off\" type=\"text\"/></td></tr>";
                 }
                 
                 html+="</li></table>";
             }
             html+= "</ul>";
             $("#"+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;
},

/**
 * 初始化单图片上传组件 <br/>
 * 选择器为:.onePicUpload <br/>
 * 上传完成后会设置input内容以及在input后面追加<img> 
 */
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("<a href='"+url+"' target='_blank'><img src='"+url+"' width='80' height='50'/></a>");
                    this.hideDialog();
                }
            });
        });
    });
}

};

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

不清楚ftp服务器是怎么样的,要怎样才能正常展示
正常情况下,在页面可以看到图片,

回复
阅读 1.7k
5 个回答

下面都说了404,路径不对啊。

检查web服务程序设置的站点根目录

404啊,检查域名,端口,路径

看到使用的是ftp地址,目前浏览器不支持HTTP/HTTPS网页里面ftp协议的url的,比如在Chrome浏览器中会看到如下警告:

[Deprecation] Subresource requests using legacy protocols (like `ftp:`) are blocked. Please deliver web-accessible resources over modern protocols like HTTPS. See https://www.chromestatus.com/feature/5709390967472128 for details.

解决办法建议把ftp服务器的图片配置为HTTP/HTTPS可以访问。

题主是分不清 http 协议和 ftp 协议吧。。。

你知道吗?

宣传栏