Vue JS中图片仅显示alt文本无法正常显示的解决方法

1. 核对文件与路径的准确性 #

• 确认public/images目录下确实存在目标图片，包括备用的default.jpg
• 注意大小写敏感：Linux/类Unix服务器下，Product.jpg和product.jpg会被识别为不同文件，需与product.photo返回的文件名完全匹配
• 避免文件名包含空格、特殊字符，建议统一使用小写字母+连字符的命名规则（如product-01.jpg）

2. 验证生成的URL有效性 #

• 在浏览器开发者工具的「Elements」面板中，查看img标签渲染后的实际src属性值
• 直接在浏览器地址栏访问该URL（如http://你的域名/images/test.jpg），若无法打开，说明路径或文件本身存在问题

3. 适配Vue项目的静态资源规则 #

• 若使用Vue CLI/Vite创建项目：public目录下的资源会被原样复制到构建产物根目录，因此/images/xxx.jpg的路径写法是正确的
• 不要在路径前添加@或~这类别名，public下的资源直接使用根路径/开头即可
• 排除将图片误放入src/assets目录的情况（该目录下的资源需通过import引入，而非直接用根路径访问）

4. 服务器配置排查（部署后场景） #

• 若本地开发正常、部署后异常，检查服务器是否正确指向项目构建后的dist目录
• 以Nginx为例，需确保配置允许访问/images路径：

  location /images/ {
      root /path/to/your/dist;
      try_files $uri $uri/ =404;
  }
  

5. 代码逻辑验证 #

• 先测试固定路径：将img标签的src临时改为<img src="/images/default.jpg" alt="Test">，确认默认图能否加载，排除getImageUrl函数的问题
• 检查product.photo的实际值：确保其不为空字符串、null或undefined，若为空则应触发默认图加载逻辑

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