Vue中img的src是动态渲染时不显示的解决

 更新时间:2019年11月14日 09:36:39   作者:laishaojiang  
今天小编就为大家分享一篇Vue中img的src是动态渲染时不显示的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

今天在项目中遇到一个需求,设计稿如下

就是展示用户头像,数据从后端获取,要是没有拿到则显示默认图片。

项目采用vue开发,本人也是第一次在实际项目中使用vue。

自然而然采用条件渲染,我的代码如下:

保存运行查看,发现没显示默认的图片,审查元素发现图片没有被打包

有点懵~

后来查阅资料发现图片使用require引入即可,更改后代码为:

搞定~

以上这篇Vue中img的src是动态渲染时不显示的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vuex state中的数组变化监听实例

    vuex state中的数组变化监听实例

    今天小编就为大家分享一篇vuex state中的数组变化监听实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue element-ui el-table组件自定义合计(summary-method)的坑

    vue element-ui el-table组件自定义合计(summary-method)的坑

    这篇文章主要介绍了vue element-ui el-table组件自定义合计(summary-method)的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • vue:axios请求本地json路径错误问题及解决

    vue:axios请求本地json路径错误问题及解决

    这篇文章主要介绍了vue:axios请求本地json路径错误问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue 子组件向父组件传值方法

    vue 子组件向父组件传值方法

    下面小编就为大家分享一篇vue 子组件向父组件传值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue3响应式方案及ref reactive的区别详解

    Vue3响应式方案及ref reactive的区别详解

    众所周知ref和reactive都是用来作响应式数据,下面这篇文章主要给大家介绍了关于Vue3响应式方案及ref reactive区别的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue自定义组件如何通过v-model指令控制组件的隐藏、显示

    vue自定义组件如何通过v-model指令控制组件的隐藏、显示

    这篇文章主要介绍了vue自定义组件如何通过v-model指令控制组件的隐藏、显示,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 在Vue中使用动态import()语法动态加载组件

    在Vue中使用动态import()语法动态加载组件

    在Vue中,你可以使用动态import()语法来动态加载组件,动态导入允许你在需要时异步加载组件,这样可以提高应用程序的初始加载性能,本文给大家介绍在Vue中使用动态import()语法动态加载组件,感兴趣的朋友一起看看吧
    2023-11-11
  • vue elementUI 上传非空验证示例代码

    vue elementUI 上传非空验证示例代码

    这篇文章主要介绍了vue elementUI 上传非空验证,原理就是写一个假的红色*号,每次点击查看的时候执this.rules.staffImg[0].required = false,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-12-12
  • 详解Vue中使用Axios拦截器

    详解Vue中使用Axios拦截器

    这篇文章主要Vue使用Axios拦截器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue中对象的赋值Object.assign({}, row)方式

    vue中对象的赋值Object.assign({}, row)方式

    这篇文章主要介绍了vue中对象的赋值Object.assign({}, row)方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论