前端展示保存的本地图片

目的

保存图片到本地后，前端无法展示。为图片保存一个网络地址，返回给前端。

类似于拦截器

逻辑：在接收到/img/user/**的请求后，将url重新进行调整

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @ Author     ：johnbarrowman65
 * @ Date       ：Created in 11:06 2019/8/15
 * @ Description：
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {
	// 存储头像图片的本地地址
    @Value("${userImg.path}")
    private String userImgPath;

	// 存储告警图片的本地地址
    @Value("${alarmImg.path}")
    private String alarmImgPath;

    // 在D:/res/pic下如果有一张 luffy.jpg.jpg的图片，那么：
    // 1 访问：http://localhost:8080/img/luffy.jpg 可以访问到
    // 2 html 中 <img src="http://localhost:8080/img/luffy.jpg">
    // 图片路由
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/img/user/**").addResourceLocations("file:" + userImgPath + "/");
        registry.addResourceHandler("/img/alarm/**").addResourceLocations("file:" + alarmImgPath + "/");
    }

    /*@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/img/**").addResourceLocations("file:/root/feedback/");
    }*/
}

数据库添加字段，用于保存图片的网络地址

url直接用浏览器打开表示成功

前端展示代码

 <el-table-column label="告警图片" align="center" prop="imgNetworkUrl">
    <template #default="scope">
        <el-avatar :size="100" :src="scope.row.imgNetworkUrl" />
    </template>
</el-table-column>

展示效果