SpringBoot项目前端Vue访问后端(图片静态资源) 配置

静态资源配置

@Configurationpublic class WebMvcConfig extends WebMvcConfigurationSupport {    @Value("${file.save-path}")    private String fileSavePath;    @Override    protected void addResourceHandlers(ResourceHandlerRegistry registry) {        //映射本地文件夹        registry.addResourceHandler("/images/**").addResourceLocations("file:" + fileSavePath);        super.addResourceHandlers(registry);    }}

 application.yml

file:   save-path: D:\qr_code_duct\qr_code_back\images\

详细说明 

由于要展示的图片可能比较大，从后端数据库中获取base64编码明显不可能（base64大部分适用于KB级别的），数据库正常来说也只存放图片的地址，而不是图片的内容。

CREATE TABLE `card_record_image` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `card_record_id` int(11) DEFAULT NULL,  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,  `operator_id` int(11) DEFAULT NULL,  `image_url` varchar(255) DEFAULT NULL,  PRIMARY KEY (`id`),  KEY `card_record_id` (`card_record_id`),  CONSTRAINT `card_record_image_ibfk_1` FOREIGN KEY (`card_record_id`) REFERENCES `card_record` (`id`)) ENGINE=InnoDB AUTO_INCREMENT=32 DEFAULT CHARSET=utf8mb4;

    public RespondDto saveCardRecord(RequestData requestData) {        // 解析前端传递的数据, 创建CardRecord对象并保存到数据库        CardRecord cardRecord = new CardRecord();        cardRecord.setProductId(requestData.getProductId());        cardRecord.setCurrentLocation(requestData.getCurrentLocation());        cardRecord.setDescription(requestData.getDesc());        cardRecord.setCreateTime(new Date());        cardRecordMapper.insert(cardRecord);        // 保存卡记录图片        List imageList = requestData.getImageList();        List imageUrlList = new ArrayList();        for (String base64Image : imageList) {            // 移除可能的前缀信息（如"data:image/jpeg;base64,"），只保留base64编码部分            String base64Data = base64Image.replaceAll("data:image/.*;base64,", "");            // 从 base64 解码成二进制数据            byte[] imageBytes = Base64.getDecoder().decode(base64Data);            // 生成文件名，这里可以根据需要生成唯一的文件名            String fileName = "image_" + UUID.randomUUID() + ".png";            // 构建文件保存路径//            String fileSavePath = "D:" + File.separator + "qr_code_duct" + File.separator + "qr_code_back" + File.separator +"images" +File.separator +fileName;            String fileSavePath = fileProperties.getSavePath() + fileName;            try (FileOutputStream fos = new FileOutputStream(fileSavePath)) {                fos.write(imageBytes);                // 替换为实际的域名和路径                imageUrlList.add("/images/" + fileName);            } catch (IOException e) {                throw new RuntimeException(e);            }            // 保存图片信息到数据库            CardRecordImage cardRecordImage = new CardRecordImage();            cardRecordImage.setCardRecordId(Math.toIntExact(cardRecord.getId()));            // 替换为实际的域名和路径            cardRecordImage.setImageUrl("/images/" + fileName);            cardRecordImage.setCreateTime(new Date());            cardRecordImageMapper.insert(cardRecordImage);        }        return new RespondDto(ResultCode.OK, "保存成功！！");    }

            返回                                                                                                                      export default {  data() {    return {      cardRecords: []    };  },  created() {    this.getAllCardRecordsWithImages();  },  methods: {    goBack() {      window.location.href = 'http://localhost:8889/login'    },    getImageUrl(imageUrl) {      return 'http://192.168.**.**:9999' + imageUrl;    },    getAllCardRecordsWithImages() {      this.$request.get('/cardRecord/allWithImages')          .then(res => {            console.log('Response data:', res.data);            if (Array.isArray(res.data) && res.data.length > 0) {              this.cardRecords = res.data.map(item => this.parseData(item));            } else {              console.error('Error fetching card records: Data is empty');            }          })          .catch(error => {            console.error('Error fetching card records:', error);          });    },    parseData(data) {      return {        productId: data.productId,        currentLocation: data.currentLocation,        images: Array.isArray(data.images) ? data.images.map(image => ({          id: image.id,          imageUrl: image.imageUrl        })) : [],        description: data.description      };    }  }};.return-button-container {  position: absolute;  top: 16px;  right: 16px;}

注意事项

1、D:\qr_code_duct\qr_code_back\images\ 这个路径一定要是项目下的路径，不然静态资源配置将会找不到。

2、D:\qr_code_duct\qr_code_back\images\这个路径最后结束一定要加\ ，不然资源也会找不到。