本文就是给大家分享一下如何解决vue.js图片资源路径错误的内容。 小编觉得非常实用，所以分享给大家作为参考，跟着小编一起来看看吧。
vue.js图片资源路径不正确的解决办法： 1、使用v-bind绑定图片的src属性； 2、使用导入的图片路径； 3、将图片放入outer文件夹，然后在data Can中定义。
当我们在Vue.js项目中引用图片时，图片路径有以下几种情况：
使用一个：
在data中定义图片路径：
imgUrl:'../assets/logo.png'
模板内部：
上面是错误的写法，我们应该使用v-bind来绑定图片的src属性：
//或者
这种方式就是按照正常的HTML语法来引用路径，可以封装在模板中。
使用两个：
当我们需要在js代码中写入图片路径时，如果我们将其写入data中，则只会被视为字符串，而无法找到图片地址。
打字错误
imgUrl:'../assets/logo.png'
此时我们可以使用导入图片路径：
import avatar from '@/assets/logo.png'
数据中定义::
使用三：
我们也可以将图片放在外层文件夹中，然后在data中定义：
imgUrl ： '../../static/logo.png'
感谢您的阅读！ 这篇关于《如何解决vue.js图片资源路径错误》的文章就分享到这里。 希望以上内容能够对您有所帮助，让您学到更多的知识。 如果您觉得文章不错，可以转发分享，让更多人看到！
