前端Vue页面中如何展示本地图片

作者 : admin 本文共608个字,预计阅读时间需要2分钟 发布时间: 2024-06-16 共1人阅读

      
        
          前端Vue页面中如何展示本地图片插图

我们使用标签展示图片,src属性设置成图片请求路径

"http://localhost:8888/image/img.jpg"的格式,也就是会向后端发送这个请求获取图片。

 

但是图片是存放在本地的某个文件里,那如何才能找到呢?

这就需要对这个请求的路径进行映射,以找到真正的存放图片的地址。

我们需要写一个配置类,添加如下的方法
@Configuration
public class WebAppConfigurer implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {            
    registry.addResourceHandler("/image/**").addResourceLocations("file:D:\img\");

/*
    在这段代码中,addResourceHandlers方法用于添加资源处理器。ResourceHandlerRegistry对象用于注册资源处理器,并指定资源的访问路径和存放位置。
        /image/**对应的资源就放在D盘的img目录下,通过这样的配置当前端发送
http://localhost:8888/image/123.jpg时,应用程序会将请求映射到本机 D:\img3.jpg路径下的文件,并将文件返回给前端。
如果是Linux系统,则不加盘符
*/
    }
}

本站无任何商业行为
个人在线分享 » 前端Vue页面中如何展示本地图片
E-->