Vue动态设置img的src不生效

--------------->>最近遇见动态渲染img时，想起了当初刚开始写vue时，曾经遇见的一个小小坑。Vue中：img的src属性是动态渲染时不显示问题1.需求：展示用户头像，数据从后台获取，如果没有拿到则显示默认图片。如图：2.第一次写：如图：3.结果（汗。。。）并没有显示默认图片来代替：审查元素发现没显示默认的图片，图片没有被打包。。。。如图：4.解决方案：（使用requi...

在vue项目中，想要动态设置img的src时，此时发现图片会加载失败。在Vue代码中是这样写的：在Vue的data中是这样写的：我的图片在根目录下的static里面：但是在页面上这个图片却无法加载出来。

标签的src属性赋值通常是通过数据绑定来实现的。你可以使用插值{{ }}，或者v-bind:src（简写为:src）来实现这一点。下面是一些示例来说明如何动态赋值给。标签的src属性赋值。你可以根据实际情况选择最适合你的方法。方法2：使用v-bind:src或:src。以上方法展示了如何在Vue中动态地给。动态从数据属性中获取URL。使用计算属性动态生成URL。在Vue中，动态地给。

在VUE项目中有时会遇到需要动态修改Img的src的情况，如果直接修改会使得图片无法显示出来。这是由于src被当做静态资源处理了，并没有进行编译。

这样正常使用并不能正常引入图片，vue3.2作为按需引入的版本。

img标签直接动态绑定图片的相对路径的时候，图片不能正常显示。动态地址，路径被加载器解析为字符串，所以图片找不到。设置绝对路径或者相对路径是改为用。引入才能成功，就可以动态使用了。

【代码】关于VUE3中动态绑定img标签的src属性的问题。

这是最终要得一步，否则vue就不会正确解析img的本地地址。

此时图片没有出现，控制台报错 http://localhost:8080/assets/animals1.jpeg 404 (Not Found)使用vue cli 创建的vue2项目，项目中想实现轮播效果。使用require引入图片，完整代码如下，此时图片引入成功。使用 :src 动态绑定图片地址，图片没有出现。此时控制台中出现的图片地址是。

关于img的src动态赋值图片不显示的问题。

给img标签动态设置src属性，不生效js如下： for(var i = 0; i<len;i++){ var data = datas[i]; var nickname = data.nickname; var avatar = data.avatar; var li_item = ''; if(avatar == null){ // ...

将标签的数据加上require()即可。

图片的本地相对路径需要使用require包裹 data() { return { img_src:require("../../assets/images/mirror-service.png)" } }