Vue中＜img＞标签图片想实现动态切换时，无法正常显示问题

目录

问题描述

解决办法

---

问题描述

最近又在写项目，写到点赞这个地方的时候，想要实现一个图片的动态切换。本以为是一个很简单的问题，没想到却出了问题。

首先我们来看看不进行动态切换时的状态：

<img src="../assets/image/踩.svg">

此时的浏览器控制台显示的是这样的:

图片的路径和我们在编辑器中写的是有出入的。

而当我想要是实现动态切换时，我最初的思路是这样的：通过三元运算符加上一个参数进行判断，来达到切换效果。像这样：

<img :src="isTrample ? '../assets/image/踩.svg' : '../assets/image/踩-填充.svg'">

但是结果就是图片无法显示，而浏览器控制台是这样的：

 

路径和我们在编辑器中写的一样了，但是图片却无法显示出来了。