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)


相关推荐

  • 分布式文件存储数据库MongoDB(一)—-MongoDB的启动与关闭

    分布式文件存储数据库MongoDB(一)—-MongoDB的启动与关闭

    2020年11月12日
  • 霍尼韦尔助力中石油广东石化炼化一体化项目「建议收藏」

    霍尼韦尔助力中石油广东石化炼化一体化项目「建议收藏」霍尼韦尔UOP宣布,中国石油天然气集团有限公司广东石化分公司(以下称“中石油广东石化”)将在其位于中国的炼化一体化项目中采用霍尼韦尔UOP的先进重油加工技术。投产后,新工…

    2022年10月15日
  • 数组对象转json格式[通俗易懂]

    数组对象转json格式[通俗易懂]1、数组转化成JSON对象后,key值是索引,value是数组对应的值。//数组也可以转化成JSON对象varjStr3="[[10,20,30],40,50,60]";varj3=JSON.parse(jStr3);for(letkeyinj3){console.log(‘key:’,key);}//key…

  • Linux下视频流媒体服务器搭建详解「建议收藏」

    Linux下视频流媒体服务器搭建详解「建议收藏」目标用于搭建内网流媒体服务器支持视频的点播。背景用于支持培训网站中视频点拨功能,在培训网站总体方案中需要加入流媒体服务器,用于存储和传输视频资源。相关概念流媒体流媒体(StreamingMedia)是一种新兴的网络传输技术,在互联网上实时顺序地传输和播放视/音频等多媒体内容的连续时基数据流。流媒体技术包括流媒体数据采集、视/音频编解码、存储、传输、播放等领域。流媒体系统组成包括编码工具、流媒体数…

    2022年10月20日
  • Java的final关键字详解建议收藏

    Java中的final关键字非常重要,它可以应用于类、方法以及变量。这篇文章中我将带你看看什么是final关键字?将变量,方法和类声明为final代表了什么?使用final的好处是什么?最后也有一些使

    2021年12月20日
  • 揭秘分析:朋友圈集赞引流套路,老用户是如何带来裂变效果?[通俗易懂]

    揭秘分析:朋友圈集赞引流套路,老用户是如何带来裂变效果?[通俗易懂]微信总裁张小龙在”2021年微信公开课PRO”演讲中表示:每天都有10.9亿用户打开微信。3.3亿用户进行视频通话,7.8亿用户进入朋友圈,1.2亿用户发表朋友圈。微信的用户如此庞大,朋友圈又是最大的流量洼池,企业商家想想都会”流口水”,也就理所当然成为兵家必争广告之地。  那么,怎样才能从朋友圈获得流量?小编不得不提一个大家都知道的玩法,那就是集赞。集赞可以帮助的大家找到朋友圈引流的运营之本。  朋友圈集赞运营逻辑就是老用户带动新用户,这个看上去似乎跟其他裂变玩法没有什么区别,但是还是非常值得剖析。

发表回复

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

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