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显示图片 

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • idea 21 激活码【最新永久激活】「建议收藏」

    (idea 21 激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~HC…

    2022年4月1日
  • 苹果手机软件开发教程_iOS 开发

    苹果手机软件开发教程_iOS 开发iPhone手机开发平台入门介绍和教程,网上碰到的IPhone手机开发的相关资料,收藏一下,关于在苹果的操作系统开发软件中国人了解的还非常少,中文资料也非常少,以后我就练练英语,也翻译一些吧,哈哈.1.iPhone手机介绍首先需要了解和激活成功教程iPhone手机,下面一个帖子介绍很详细:iPhone最权威[入门][激活成功教程][扫盲][资源][修砖]总汇帖http://www.weiphone.

    2022年8月12日
  • 按位取反运算符~_c语言∧按位异或运算符

    按位取反运算符~_c语言∧按位异或运算符https://www.cnblogs.com/shy1766IT/p/6184874.html二进制数在内存中以补码的形式存储。按位取反:二进制每一位取反,0变1,1变0。~9的计算步骤:转二进制:01001计算补码:01001按位取反:10110转为原码:按位取反:11001末位加一:11010符号位为1是负数,即-10varx…

    2022年8月14日
  • 你愿意成为一名全栈设计师吗?

    你愿意成为一名全栈设计师吗?

    2022年3月5日
  • C#遍历Dictionary

    C#遍历Dictionary方法推荐:http://www.cnblogs.com/roucheng/p/3521864.html

    2021年12月25日
  • Maven安装与配置

    Maven安装与配置一、需要准备的东西JDKEclipseMaven程序包二、下载与安装前往https://maven.apache.org/download.cgi下载最新版的Maven程序:2.将文件解压到D:\ProgramFiles\Apache\maven目录下:新建环境变量MAVEN_HOME,赋值D:\ProgramFiles\Apache\mave…

    2022年6月11日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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