前台图片显示问题，无法显示图片

前台图片显示问题，无法显示图片

http://img1.sycdn.imooc.com//climg/5c2cc4c20001de4518530991.jpg

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="/style/common.css" />
    <link rel="stylesheet" type="text/css" href="/style/index.css" />
</head>
<body>
<div class="header">
    <div class="logo f1">
        <img src="/image/logo.png">
    </div>
    <div class="auth fr">
        <ul>
            <li><a href="/toLogin.do">登录</a></li>
            <li><a href="#">注册</a></li>
        </ul>
    </div>
</div>
<div class="content">
    <div class="banner">
        <img class="banner-img" src="/image/welcome.png" width="732px" height="372" alt="图片描述">
    </div>

    <div class="img-content">
        <ul>
 <c:forEach items="${pageInfo.list}" var="list">
                <li>
                    <img class="img-li-fix" src="${list.imagePath}" alt="无名女郎">
                    <div class="info">
                        <h3 class="img_title">${list.name}</h3>
                        <p>
 ${list.description}
 </p>
                        <div class="btn">
                            <a href="/detail.do?id=${list.id}" class="edit">详情</a>
                        </div>
                    </div>
                </li>
 </c:forEach>
        </ul>
    </div>
    <div class="page-nav">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">上一页</a></li>
            <li><a href=""><span class="first-page">1</span></a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
            <li><a href="">5</a></li>
            <li>...</li>
            <li><a href="">98</a></li>
            <li><a href="">99</a></li>
            <li><a href="">下一页</a></li>
            <li><a href="">尾页</a></li>
        </ul>
    </div>
</div>

<div class="footer">
    <p><span>M-GALLARY</span>©2017 POWERED BY IMOOC.INC</p>
</div>
</body>
</html>
package com.imooc.canvas.dao;

import com.imooc.canvas.entity.Canvas;
import org.apache.ibatis.annotations.*;

import java.util.List;

public interface CanvasDao {
    //添加商品
    @Insert("insert into canvas (name,creator,categoryId,price,image_path,createTime,description) values (#{name},#{creator},#{categoryId},#{price},#{imagePath},#{createTime},#{description})")
    @Options(useGeneratedKeys = true,keyProperty = "id")
    void insert(Canvas canvas);

    //编辑商品
    @Update("update canvas set name=#{name},categoryId=#{categoryId},price=#{price},image_path=#{imagePath},createTime=#{createTime},description=#{description} where id=#{id}")
    void update(Canvas canvas);

    //删除商品
    @Delete("delete from canvas where id=#{id}")
    void delete(int id);

    //查询单个商品
    @Select("select c.*,ca.name cname from canvas c inner join category ca on c.categoryId=ca.id where c.id=#{id}")
    @Results(id = "all",value = {
            @Result(column = "id",property = "id",id = true),
            @Result(column = "categoryId",property = "categoryId"),
            @Result(column = "name",property = "name"),
            @Result(column = "creator",property = "creator"),
            @Result(column = "price",property = "price"),
            @Result(column = "imagePath",property = "imagePath"),
            @Result(column = "createTime",property = "createTime"),
            @Result(column = "updateTime",property = "updateTime"),
            @Result(column = "description",property = "description"),
            @Result(column = "details",property = "details"),
            @Result(column = "cname",property = "category.name")
    })
    Canvas select(int id);

    //查询全部商品
    @Select("select c.*,ca.name cname from canvas c inner join category ca on c.categoryId=ca.id order by c.id desc")
    @ResultMap("all")
    List<Canvas> selectAll();


    //前台页面展示
    @Select("select c.*,ca.name cname from canvas c inner join category ca on c.categoryId=ca.id")
    @ResultMap("all")
    List<Canvas> selectShow();



}
package com.imooc.canvas.biz;

import com.imooc.canvas.entity.Canvas;

import java.util.List;

public interface CanvasBiz {

    //添加商品
    void add(Canvas canvas);

    //编辑商品
    void edit(Canvas canvas);

    //删除商品
    void remove(int id);

    //获取单个商品
    Canvas get(int id);

    //获取全部商品
    List<Canvas> getAll();

    //前台展示
    List<Canvas> getShow();

}
package com.imooc.canvas.biz.Impl;

import com.imooc.canvas.biz.CanvasBiz;
import com.imooc.canvas.dao.CanvasDao;
import com.imooc.canvas.entity.Canvas;
import com.imooc.canvas.global.DaoFactory;

import java.io.IOException;
import java.util.Date;
import java.util.List;

public class CanvasBizImpl implements CanvasBiz {
    private CanvasDao canvasDao;

    {
        try {
            canvasDao = DaoFactory.getInstance().getDao(CanvasDao.class);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }


    public void add(Canvas canvas) {
        Date now = new Date();
        canvas.setCreateTime(now);
        canvas.setUpdateTime(now);
        canvasDao.insert(canvas);
    }

    public void edit(Canvas canvas) {
        canvasDao.update(canvas);

    }

    public void remove(int id) {
        canvasDao.delete(id);

    }

    public Canvas get(int id) {
        return canvasDao.select(id);
    }

    public List<Canvas> getAll() {
        return canvasDao.selectAll();
    }

    public List<Canvas> getShow() {
        return canvasDao.selectShow();
    }
}
package com.imooc.canvas.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.imooc.canvas.biz.AccountBiz;
import com.imooc.canvas.biz.CanvasBiz;
import com.imooc.canvas.biz.Impl.AccountBizImpl;
import com.imooc.canvas.biz.Impl.CanvasBizImpl;
import com.imooc.canvas.entity.Account;
import com.imooc.canvas.entity.Canvas;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

public class DefaultController {
    AccountBiz accountBiz = new AccountBizImpl();
    CanvasBiz canvasBiz = new CanvasBizImpl();
    //       /toLogin.do
    public void toLogin(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getRequestDispatcher("/WEB-INF/pages/admin/login.jsp").forward(request,response);
    }

    //       /login.do
    public void login(HttpServletRequest request,HttpServletResponse response) throws IOException {
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        Account account = accountBiz.login(name,password);
        if (account == null){
            response.sendRedirect("toLogin.do");
        }else {
            request.getSession().setAttribute("ACCOUNT",account);
            response.sendRedirect("/admin/Canvas/list.do");
        }
    }
    //      /quit.do
    public void quit(HttpServletRequest request,HttpServletResponse response) throws IOException {
        request.getSession().setAttribute("ACCOUNT",null);
        response.sendRedirect("toLogin.do");
    }

    //     /index.do
    public void index(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
        //分页
        String pageNum = request.getParameter("pageNum");
        if(pageNum==null){
            pageNum="1";
        }

        PageHelper.startPage(Integer.parseInt(pageNum),6);
        List<Canvas> list = canvasBiz.getShow();
        PageInfo pageInfo = PageInfo.of(list);
        request.setAttribute("pageInfo",pageInfo);
        request.getRequestDispatcher("/WEB-INF/pages/index.jsp").forward(request,response);
    }

    //      /detail.do
    public void detail(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
        int id = Integer.parseInt(request.getParameter("id"));
        Canvas canvas = canvasBiz.get(id);
        request.setAttribute("canvas",canvas);
        request.getRequestDispatcher("/WEB-INF/pages/detail.jsp").forward(request,response);
    }
}
package com.imooc.canvas.entity;

import java.util.Date;

/**
 * 商品实体类
 */
public class Canvas {
    private int id;
    private int categoryId;
    private String name;
    private String creator;
    private int price;
    private String imagePath;
    private Date createTime;
    private Date updateTime;
    private String description;
    private String details;
    private Category category;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public int getCategoryId() {
        return categoryId;
    }

    public void setCategoryId(int categoryId) {
        this.categoryId = categoryId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getCreator() {
        return creator;
    }

    public void setCreator(String creator) {
        this.creator = creator;
    }

    public int getPrice() {
        return price;
    }

    public void setPrice(int price) {
        this.price = price;
    }

    public String getImagePath() {
        return imagePath;
    }

    public void setImagePath(String imagePath) {
        this.imagePath = imagePath;
    }

    public Date getCreateTime() {
        return createTime;
    }

    public void setCreateTime(Date createTime) {
        this.createTime = createTime;
    }

    public Date getUpdateTime() {
        return updateTime;
    }

    public void setUpdateTime(Date updateTime) {
        this.updateTime = updateTime;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public String getDetails() {
        return details;
    }

    public void setDetails(String details) {
        this.details = details;
    }

    public Category getCategory() {
        return category;
    }

    public void setCategory(Category category) {
        this.category = category;
    }
}
DROP TABLE IF EXISTS `canvas`;
CREATE TABLE `canvas` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `categoryId` bigint(20) NOT NULL,
  `name` varchar(45) NOT NULL,
  `creator` varchar(50) DEFAULT NULL,
  `price` int(9) DEFAULT NULL,
  `image_path` VARCHAR(100),
  `createTime` timestamp NULL DEFAULT NULL,
  `updateTime` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `description` varchar(255) DEFAULT NULL,
  `details` varchar(20000) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=28 DEFAULT CHARSET=utf8;

http://img1.sycdn.imooc.com//climg/5c2cc6680001104c05411080.jpg
精慕门6573819 2019-01-02
源自：项目：商品信息管理   5-2 作业题
1
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

3回答
好帮手慕阿莹 回答被采纳获得+3积分 2019-01-03 10:26:40

请同学在浏览器端按F12看一下，看看控制台是否有报错信息，如果有，请同学截图一下报错提示。以及看一下你的这个<img class="img-li-fix" src="${list.imagePath}" alt="无名女郎">src的地方显示的是什么呢？ 祝学习愉快！



0
收起回答
  • 精慕门6573819 提问者 #1
    没有报错，src显示如图
    2019-01-03 11:38:38
提问者 精慕门6573819 2019-01-03 11:38:09

http://img1.sycdn.imooc.com//climg/5c2d83960001839b18530989.jpg

http://img1.sycdn.imooc.com//climg/5c2d8395000105f819061022.jpg


0
收起回答
  • 好帮手慕阿莹 #1
    同学是否正确存储了地址呢？你的数据库中是否已经存储了图片地址呢？ 在展示到页面上之前，建议同学从后台获取一下imagePath打印出来的是什么？ 祝学习愉快！
    2019-01-03 13:42:26
  • 提问者 精慕门6573819 回复 好帮手慕阿莹 #2
    谢谢老师,解决了,查询的SQL语句的Result中的column和数据库中图片的字段不一致,改过来就好了
    2019-01-03 14:21:18
提问者 精慕门6573819 2019-01-02 22:14:49 
package com.imooc.canvas.controller;

import com.imooc.canvas.biz.CanvasBiz;
import com.imooc.canvas.biz.CategoryBiz;
import com.imooc.canvas.biz.Impl.CanvasBizImpl;
import com.imooc.canvas.biz.Impl.CategoryBizImpl;
import com.imooc.canvas.entity.Canvas;
import com.imooc.canvas.entity.Category;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.Date;
import java.util.List;

public class CanvasController {
    private CanvasBiz canvasBiz = new CanvasBizImpl();
    private CategoryBiz categoryBiz = new CategoryBizImpl();

    //    /admin/Canvas/list.do
    public void list(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        List<Canvas> list = canvasBiz.getAll();
        System.out.println(list);
        request.setAttribute("list",list);
        request.getRequestDispatcher("/WEB-INF/pages/admin/canvas_list.jsp").forward(request,response);
    }

    //    /admin/Canvas/toAdd.do
    public void toAdd(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
        List<Category> list = categoryBiz.getRoot();
        request.setAttribute("list",list);
        request.getRequestDispatcher("/WEB-INF/pages/admin/canvas_add.jsp").forward(request,response);
    }

    //    /admin/Canvas/add.do
    public void add(HttpServletRequest request,HttpServletResponse response) throws Exception {
        Canvas canvas = builder(request);
        canvasBiz.add(canvas);
        response.sendRedirect("list.do");
    }

    //     /admin/Canvas/toEdit.do
    public void toEdit(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
        int id = Integer.parseInt(request.getParameter("id"));
        Canvas canvas = canvasBiz.get(id);
        request.setAttribute("canvas",canvas);
        List<Category> list = categoryBiz.getRoot();
        request.setAttribute("list",list);
        request.getRequestDispatcher("/WEB-INF/pages/admin/canvas_edit.jsp").forward(request,response);
    }

    //       /admin/Canvas/edit.do
    public void edit(HttpServletRequest request,HttpServletResponse response) throws Exception {
        Canvas canvas = builder(request);
        canvasBiz.edit(canvas);
        response.sendRedirect("list.do");
    }

    //     /admin/Canvas/remove.do
    public void remove(HttpServletRequest request,HttpServletResponse response) throws IOException {
        int id = Integer.parseInt(request.getParameter("id"));
        System.out.println(id);
        canvasBiz.remove(id);
        response.sendRedirect("list.do");
    }

    private Canvas builder(HttpServletRequest request) throws FileUploadException, UnsupportedEncodingException {
        Canvas canvas = new Canvas();
        FileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);
        upload.setHeaderEncoding("UTF-8");
        List<FileItem> list = upload.parseRequest(request);
        for (FileItem item:list){
            //判断是表单项还是文件上传项
            if(item.isFormField()){
                //表单项
                if (item.getFieldName().equals("id")){
                    canvas.setId(Integer.parseInt(item.getString("UTF-8")));
                }
                if (item.getFieldName().equals("name")){
                    canvas.setName(item.getString("UTF-8"));
                }
                if (item.getFieldName().equals("categoryId")){
                    canvas.setCategoryId(Integer.parseInt(item.getString("UTF-8")));
                }
                if(item.getFieldName().equals("price")){
                    canvas.setPrice(Integer.parseInt(item.getString("UTF-8")));
                }
                if (item.getFieldName().equals("imagePath")&&canvas.getImagePath()==null){
                    canvas.setImagePath(item.getString("UTF-8"));
                }
                if (item.getFieldName().equals("description")){
                    canvas.setDescription(item.getString("UTF-8"));
                }
            }else {
                //文件上传项
                if (item.getFieldName().equals("imagePath")){
                    if (item.getSize()<=100) continue;

                    String rootPath = request.getServletContext().getRealPath("/");
                    String path = item.getName();
                    String type = ".jpg";

                    if (path.indexOf(".")!=-1){
                        type = path.substring(path.lastIndexOf("."));
                    }
                    path = "/download/images/"+System.currentTimeMillis();
                    try {
                        item.write(new File(rootPath+path));
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                    canvas.setImagePath(path);
                }
            }
        }
        return canvas;
    }

}


0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

图片无法显示
2 0 7
网页的图片无法显示，403错误
41 1 3
图书的图片不显示
43 0 3
图片显示问题
10 0 3
现在有个其他问题，TAB的图片显示不出来
0 0 3

登录后可查看更多问答，登录/注册

Java数据库开发与实战应用2018版
  • 参与学习           人
  • 提交作业       277    份
  • 解答问题       4297    个

Java数据库开发的必备技能，从流行的MySQL数据库开始，到Java原生的数据库管理接口JDBC的使用，再到常用的数据持久化框架MyBatis，让你向Java工程师的目标又迈进了一步！

了解课程

本课精华内容

问答 作业

这里为什么要作 是否为空的判断？

23 3

major为null是什么原因？

23 5

index.jsp中用到的css和js文件路径按什么规则来写？

4 4

这个不懂为什么？id没有降序排列，为什么是后三条改变了？

2 1

以下代码请逐句详细解释以下，谢谢！

0 2

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师