前后端分离项目,(vue2+springboot2.6.3)
前端上传图片,后端将图片保存在本地。当前端使用上传的图片时出现的一些问题说明。
前端上传图片文件,后端接收到图片文件后将图片保存到vue项目的src/assets/club
目录下,如下图所示。
图片地址在数据库表中的存储为@/assets/club/2023-04-23/1682216045215shoot.jpg
。后续前端请求图片时后端返回的图片地址就是数据库存储的。
vue组件中使用图片地址时出现的问题如下:
imgUrl:“@/assets/club/2023-04-23/1682216045215shoot.jpg”
imgUrl的值是后端从数据库返回的数据。
第一种 <img :src="ImgUrl" alt="">
报错信息如下:
第二种 <img src="
${imgUrl}" />
其中${imgUrl}为反引号``
报错信息如下:
第三种 <img :src="require(imgUrl)" />
报错信息如下:
第四种 <img :src="
@/assets/club/${imgUrl.substring(14)}" alt="" />
报错信息如下: