Solve Vue error Not allowed to load local resource

Problem Description

In the front-end separation project, I access the local image through the absolute path in the <img> tag in the front-end vue, and load the image

Sometimes it will report Not allowed to load local resource:  , I also searched for this problem, and this problem appeared

The reason is that the browser prohibits accessing images through absolute paths for security reasons, and needs to access them through virtual paths. Download

In the following, I will briefly and clearly explain the solution.

Solution

By creating a configuration class, the configuration class implements  the WebMvcConfigurer interface and rewrites the

addResourceHandlers  method.

@Configuration
public class PictureConversionConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
         /**
           * 资源映射路径
           * addResourceHandler：访问映射路径
           * addResourceLocations：资源绝对路径
          */
        registry.addResourceHandler("/doctor/**")
                .addResourceLocations("file:///E:/GraduationDesign/manage/hospital/src/assets/picture/");
    }
}

Fill in the virtual path you want to set in the first addResourceHandler method, as follows

The addResourceLocations method fills in the absolute path of resources. After the configuration is complete, the virtual path is

http://localhost: configuration class port number/doctor/picture name.

For example, the absolute path above is E:/GraduationDesign/manage/hospital/src/assets/picture/ , and the overall picture

The path is E:/GraduationDesign/manage/hospital/src/assets/picture/qq.jpg , then the virtual path here

for http://localhost:8201/doctor/qq.jpg