出现这样的错一般为直接引用项目外的资源(图片,视频).
image
然后打开网页结果
image
不允许直接访问我们就需要配置一个虚拟路径来访问系统中的资源.
容器为tomcat解决方法
1. 打开tomcat服务界面 在下面选择Modules 然后选择Add Web Module
image
2. 选择Browse 选择你的资源目录,然后填写path 假如选择的为d盘 d盘下有一张a.png 那么你再写<img src="/image/a.png">即可
image
使用的spring boot
因为是内置的tomcat所有没法想上面一样直接选择.
我们可以写一个配置类
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class MyWebConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/image/**").addResourceLocations("file:E:/uploadTool/result/");
}
}
路径ResourceHandler (/image/**)跟上面tomcat/image为一个道理, ResourceLocations("....")为你选择的系统资源目录
需要在目录前加file:
然后同tomcat直接使用<img src="/image/a.png">
base64转码
除此之外，应该还有一个方法：
即img标签可显示base64转码的图片。将本地图片先进行base64转码，之后再img标签中显示，这样问题解决了。
1、后台提供转码
public String getBaseImg(String imgPath) throws CustomException {
InputStream in = null;
byte[] data = null;
try {
in = new FileInputStream(WorkConstant.PROIMAGE_DIR_REALNAME + "/webSystem/" + imgPath);
data = new byte[in.available()];
in.read(data);
in.close();
} catch (IOException e) {
e.printStackTrace();
}
//进行Base64编码
BASE64Encoder encoder = new BASE64Encoder();
return encoder.encode(data);
}
2、前台img标签显示图片
$.ajax({
url:'./getBaseImg.do',
data:{imgPath:$("#webImage").val()},
success:function (data) {
$("#webImageTrue").attr("src", "data:image/jpeg;base64,"+data);
}
})
这种就可以实现img标签显示本地文件了
