Vue.js中动态渲染数据库存储的图片不显示该如何修复

1. 首要修复：img属性拼写错误 #

你模板里的图片动态属性拼写错误，把:src写成了:scr，这是图片加载失败最直接的原因，先修正这行代码：

<!-- 错误写法 -->
<img :scr="getImg(index)" alt='game'> 
<!-- 正确写法 -->
<img :src="getImg(index)" alt='game'> 

如果修正后仍然无法加载，按以下步骤逐一排查：

2. 验证图片路径有效性 #

• 打开浏览器开发者工具（F12），切换到「网络」面板，刷新页面查看图片请求的实际地址和返回状态码：
  • 状态码为404：说明路径拼接错误，或图片文件不存在于对应目录
  • 状态码为403/401：说明图片资源有访问权限限制
• 也可以直接在getImg方法中打印返回值，验证拼接后的路径是否和实际图片存放路径一致：

getImg(index){
  const path = '/static/images/store/'+ this.games[index]['cover_img'];
  console.log('拼接后的图片路径：', path);
  return path;
},

将打印出的路径直接粘贴到浏览器地址栏访问，确认是否可以正常打开图片。

3. 验证games数组数据完整性 #

确认异步请求返回的数据已经成功赋值给games数组，且cover_img字段取值正常：

• 在接口请求回调中打印this.games，确认每个元素的cover_img字段是包含后缀名的正确文件名，不存在空值、undefined或者多余的前后缀
• 可以给img标签加判空逻辑，避免数据未加载完成时报错：

<img v-if="games[index]?.cover_img" :src="getImg(index)" alt='game'> 

4. 静态资源配置检查 #

如果使用Vue CLI/Vite等构建工具，需要确认静态资源存放目录配置正确：

• 默认静态资源需要放在项目根目录的public文件夹下，/static/images/对应的实际路径应为public/static/images/
• 如果你的图片存放在src/assets目录下，不能直接拼接路径加载，需要用require导入：

getImg(index){
  return require(`@/assets/images/store/${this.games[index]['cover_img']}`);
},

额外语法错误提示 #

你模板中的v-if写法不规范，缺少引号，建议修正避免其他渲染问题：

<!-- 错误写法 -->
<input v-if=(checkAvailable(index)) type='submit' class=' pointer ' name='submit' value='Add to cart' @click='addGame' />
<!-- 正确写法 -->
<input v-if="checkAvailable(index)" type='submit' class='pointer' name='submit' value='Add to cart' @click='addGame' />

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