Vue img的src 动态渲染不显示踩坑记录

在开发Vue项目的过程中，我们经常会遇到需要动态渲染img标签的src属性的情况。Vue提供了:src指令来实现这个功能，但有时候我们可能会遇到一些坑，导致图片无法正常显示。本篇博客将记录一些常见的问题和解决方法，帮助大家更好地应对这个问题。

1. 问题描述

在Vue中，我们通常会这样使用:src指令来动态渲染图片的src属性：

<img :src="imgUrl" alt="图片">

然后在data中定义imgUrl的值：

data() {
  return {
    imgUrl: 'path/to/image.jpg'
  }
}

但有时候，我们会发现图片无法正常显示。接下来，我们将聚焦于一些常见的原因。

首先，检查你给:src绑定的路径是否正确。在Vue中，:src跟在路径前面的:是绑定指令的一种简写形式，它表示绑定的是一个Vue变量，而不是字符串。

如果你是通过相对路径来引用图片的，需要确保路径是相对于你的Vue组件文件的。也就是说，如果你的Vue组件文件在src/components目录下，而图片是在src/assets目录下，你需要使用相对于Vue组件文件的相对路径来引用图片。

另外，如果你是通过绝对路径来引用图片的，需要确保路径是正确的。有时候，由于配置文件或服务器的原因，绝对路径会发生变化，导致图片无法正确显示。

如果图片路径没有问题，但图片仍然无法显示，可能是因为图片加载失败。这可能是由于网络问题，或者图片文件本身被移除或损坏。

为了解决加载失败的问题，可以给<img>标签添加一个@error事件监听器。这样，当图片加载失败时，你可以在该事件处理函数中执行一些操作，比如更换图片，或者显示一张缺省图。

<img :src="imgUrl" @error="handleImageLoadError" alt="图片">

methods: {
  handleImageLoadError() {
    this.imgUrl = 'path/to/defaultImage.jpg';
  }
}

如果你的图片路径是一个Vue变量，而不是一个字符串常量，需要确保该变量是被正确赋值的。

有时候，可能会在图片加载之前就把路径变量进行了操作，导致图片路径不正确。为了解决这个问题，你可以在data中预先定义一个默认的图片路径变量，然后在mounted钩子函数中，根据实际情况对该变量进行赋值。

data() {
  return {
    defaultImgUrl: 'path/to/defaultImage.jpg',
    imgUrl: '',
    ...
  }
},
mounted() {
  // 根据实际情况对imgUrl进行赋值
  ...
}

这样，即使加载图片的过程出现问题，你也可以保证默认的图片路径变量被正确赋值，从而显示默认的图片。

上文中，我们记录了一些Vue动态渲染img标签src属性不显示的常见问题，并给出了相应的解决方法。希望这篇博客能帮助到大家更好地应对这个问题。

回顾一下，当遇到img的src动态渲染不显示的问题时，首先要检查路径是否正确，包括相对路径和绝对路径，然后可以考虑是否图片加载失败，以及路径是否被正确赋值。通过仔细检查和排查，相信你能找到并解决这个问题。

希望本篇博客对你有所帮助，谢谢阅读！