vue加载图片,vue监听图片加载完成

　　最近遇到一个问题。我用v-bind动态绑定img的src，图片加载不了。所以下面这篇文章主要介绍vue动态加载本地镜像的相关信息，有需要的朋友可以参考一下。

发现问题

　　今天遇到了一个把本地图片引入vue文件的问题，于是有了这篇文章。

　　通常，我们的一个img标签在html中是这样写的：

　　imgsrc=./images/demo.png

　　这种写法只能参考相对路径中的图片。不能使用绝对路径。如果使用绝对路径，这些资源将被直接复制，而不会被webpack处理。

　　如果src是一个变量，我们通常会在数据中设置一个变量src进行动态绑定。

　　img:src=src

　　//变量src在//data中定义

　　data(){

　　返回{

　　 src:./images/demo.png

　　}

　　}

　　然而，此时会发现，此时图像没有被加载和显示。通过检查，发现显示了该图像的地址./images/demo.png，这意味着v-bind绑定的相对路径不会被webpack的file-loader处理，只是简单的文本替换。

　　那我该怎么办？

解决方法

　　1.将图片转换为**base64**格式。

　　img src= data:image/png；base64，iVBYKIGlo

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。