Vue.js通过Django REST API获取图片绑定src后无法显示如何解决？

核心错误原因 #

• Vue 不支持在HTML属性中使用{{}}插值语法绑定动态值，属性动态绑定必须使用v-bind指令（可简写为:）
• Django REST Framework 默认返回的图片字段是相对路径（如/media/avatar/xxx.jpg），没有补全服务端域名的话前端会以当前站点域名请求，导致404
• 你的JS代码中this.image = res.data.foto是无效代码，res.data是用户数组，不存在foto属性，可直接删除

修正代码 #

模板部分修正 #

把img标签的src改为动态绑定，同时补全Django服务端域名前缀：

<img 
  :src="`https://sistema-control-inventario.herokuapp.com${usu.foto}`" 
  class="img-circle elevation-2" 
  alt="User Image" 
  width="60"
  @error="e => e.target.src = 'https://via.placeholder.com/60'" <!-- 加载失败显示默认占位图，可选 -->
>

如果你的Django配置已经返回了完整的图片URL，可直接简写为:src="usu.foto"即可。

JS代码修正 #

删除无效的image赋值行：

async listar() {
  const res = await axios.get('https://sistema-control-inventario.herokuapp.com/usuarios/');
  this.usuarios = res.data;
},

验证方法 #

可以在img标签附近临时加{{usu.foto}}打印返回的图片路径，确认路径是否完整，是否能直接在浏览器地址栏访问成功。

额外注意：你当前循环的变量是usu，但按钮绑定事件里用的cat变量未定义，后续功能调试时需要把cat改为usu，否则编辑、删除功能会报错。

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