springboot+vue前后端分离的项目中首页使用轮播图，在运行项目时

springboot+vue前后端分离的项目中首页使用轮播图，一段时间后，在运行项目时，图片无法显示，这是什么原因？
运行截图：

代码也没有，控制台错误信息也没😂，看啥子

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7527359
• 这篇博客你也可以参考下：关于springboot vue前后端分离项目部署到阿里云轻量服务器（前后端分开部署）
• 除此之外, 这篇博客: SpringBoot + Vue前后端分离开发：全局异常处理及统一结果封装中的 SpringBoot + Vue前后端分离开发：全局异常处理及统一结果封装 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• • 您还可以看一下 张长志老师的SpringBoot+Vue前后端分离的分布式项目实战教程课程中的 00前后端分离项目总体概览小节, 巩固相关知识点
    
  • 以下回答由chatgpt基于相关博客总结生成:

    根据提供的截图来看，似乎是前端访问图片资源时跨域问题造成的。根据参考资料，可以通过后端解决跨域问题的方式解决此问题。具体解决方法如下：

    1.在后端项目中新建一个CorsConfig类，实现WebMvcConfigurer接口，并重写其中的addCorsMappings方法。以下是具体代码：

    @Configuration
    public class CorsConfig implements WebMvcConfigurer {
    
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOriginPatterns("*") //允许跨域请求的域名
                    .allowCredentials(true) //是否允许发送Cookie信息
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") //允许请求的方式
                    .maxAge(3600); 
        }
    }
    

    2.在Vue项目中修改axios请求拦截器，增加withCredentials和设置跨域请求的域名，以下是代码示例：

    import axios from 'axios'
    import store from '@/store'
    import router from '@/router'
    
    // 创建axios实例
    const Axios = axios.create({
      timeout: 10000, // 请求超时时间
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      },
    });
    
    // http request拦截器
    Axios.interceptors.request.use(
      config => {
        //每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token
        const token = store.state.token;
        token && (config.headers.Authorization = token);
        //设置跨域请求的域名
        config.headers['origin'] = 'http://localhost:8080';
        //设置是否允许发送Cookie信息，必须设置为true
        config.withCredentials = true;
        return config;
      },
      error => {
        return Promise.error(error);
    });
    
    // http response拦截器
    Axios.interceptors.response.use(
      response => {
        if (response.data.code === '401' || response.data.code === '403') {
          router.replace({
            path: '/login',
            query: { redirect: router.currentRoute.fullPath }
          });
        }
        return Promise.resolve(response.data);
      },
      error => {
        return Promise.reject(error.response);
    });
    
    export default Axios;
    

    以上方法应该能够解决图片无法正常显示的问题。