VueJS配合Laravel实现动态图片加载 路径正确但图片不显示问题求助

• 首先确认Laravel端已创建存储软链接
  Laravel的storage/app/public目录默认不对外开放，需要执行Artisan命令创建软链接到公开目录：

  php artisan storage:link
  

  执行后public/storage目录会映射到storage/app/public，此时存放在storage/app/public/images/xxx.jpg的图片，公开访问路径为/storage/images/xxx.jpg。
• 校验接口返回的路径格式是否正确
  大概率返回的是服务端本地路径（比如storage/app/public/images/xxx.jpg）而非前端可访问的公开路径，需要调整后端接口返回值为去掉storage/app/public前缀的相对路径，比如仅返回images/xxx.jpg。
• 调整Vue端路径拼接逻辑
  前端拿到后端返回的相对路径后，需要拼接上存储的公开前缀，如果前后端域名不同还要加上后端域名：

  mounted() {
      axios.get('/api/image')
      .then(res => {
          // 同域部署用相对路径即可
          this.img = `/storage/${res.data}`
          // 跨域开发场景需要拼接后端域名，建议用环境变量存储后端地址
          // this.img = `${import.meta.env.VITE_BACKEND_URL}/storage/${res.data}`
      })
      .catch(error => console.log(error))
  }
  

• 快速验证方法
  把拼接完成的this.img值打印出来，直接复制到浏览器地址栏访问，如果返回404说明路径配置依然错误，先解决后端资源可访问问题再调试前端渲染逻辑。
• 其他可能问题
  检查图片文件名是否包含中文、特殊符号未做URL编码，或者服务端public目录下的.htaccess/Nginx配置限制了静态资源访问。

内容的提问来源于stack exchange，提问作者Gordon