Vue中显示img图片,显示不出来怎么办?vue显示图片

Vue中显示img图片,显示不出来怎么办?vue显示图片1、近期在学习Vue中发现了一个难点就是显示图片<img>试了很多办法都不行,有的还保错。后来我找了很多人,以及网上找资料终于被我给找到了。2、如何你是一个普通组件的话,那么这样就可以了<imgsrc="../assets/images/fk.jpg"width="100%">上面这种是写死的,下面让我们试试进行动态显示;或者这样写也可以:…

大家好,又见面了,我是你们的朋友全栈君。

1、近期在学习Vue中发现了一个难点就是显示图片<img> 试了很多办法都不行,有的还保错。后来我找了很多人,以及网上找资料终于被我给找到了。

2、如何你是一个普通组件的话,那么这样就可以了

 <img src="../assets/images/fk.jpg" width="100%">

  上面这种是写死的,下面让我们试试进行动态显示

Vue中显示img图片,显示不出来怎么办?vue显示图片

或者这样写也可以:

return {
   imgUrl:require("@/assets/images/fk.jpg")
}

有时候我们的组件可能是一个子组件或者子子组件那么我们这样写

<script>
    import imgUrl from '@/assets/images/fk.jpg'
    export default {
        name:'UserFace',
        data(){
            return {
              //imgUrl:require("@/assets/images/fk.jpg");
              imgUrl,
            }
        }
    }
</script>

总结:有时候src下面的路径../是访问不到的,那么可以试试使用下面

  1. @代替 src目录
  2. require(“@/assets/images/xxx.jpg”)
  3. 以上都不行,试试更换图片存放目录到 static 文件中

 查询效果 ==》  Vue显示图片 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/151977.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)
blank

相关推荐

  • idea激活码2021.10_最新在线免费激活「建议收藏」

    (idea激活码2021.10)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html1STL5S9V8F-eyJsaWNlbnNlSWQi…

  • idea vim 配置[通俗易懂]

    idea vim 配置[通俗易懂]imapjkimapkjsettimeoutlen=300setkeep-english-in-normal-and-restore-in-insertsetkeep-english-in-normalsetclipboard=unnamedsetignorecase

  • idea202.3.3激活码[在线序列号]

    idea202.3.3激活码[在线序列号],https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • SAP中ABAP开发常用的BAPI汇总

    SAP中ABAP开发常用的BAPI汇总有些订单SAP提供了Function和BAPI两种方式创建、修改订单,我们建议使用BAPI方式,BAPI会有一些逻辑的检查。MM模块MM01、MM02BAPI_MATERIAL_SAVEDATA创

  • 网络协议之视频直播核心技术讲解

    网络协议之视频直播核心技术讲解网络视频直播存在已有很长一段时间,随着移动上下行带宽提升及资费的下调,视频直播被赋予了更多娱乐和社交的属性,人们享受随时随地进行直播和观看,直播的打开时间和延迟变成了影响产品功能发展重要指标。那么,问题来了:如何实现低延迟、秒开的直播?先来看看视频直播的5个关键的流程:录制->编码->网络传输->解码->播放每个环节对于直播的延迟都会产生不同程度的影响。这里重点分析移动设备的情况。受限于技术的成熟度、硬件环境等,我们针对移动场景简单总结出直播延迟优化的4个点…

  • nessus怎么安装_还原魔方步骤带图

    nessus怎么安装_还原魔方步骤带图0x01实验原理:利用漏洞扫描器能够自动应用漏洞扫描原理,对目标主机安全漏洞进行检测,附带识别主机漏洞的特征库的功能,从而完成网络中大量主机的漏洞识别工作。(有相应的缺点)0x02实验拓扑:0x03实验步骤:一、下载安装漏洞扫描器nessus1.下载Nessus在官方网站下载对应的Nessus版本:http://www.tenable….

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号