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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 什么是带通滤波器,其有什么作用?_带阻滤波器的作用是什么

    什么是带通滤波器,其有什么作用?_带阻滤波器的作用是什么带通滤波器作用带通滤波器是一个允许特定频段的波通过同时屏蔽其他频段的设备。比如RLC振荡回路就是一个模拟带通滤波器。带通滤波器是指能通过某一频率范围内的频率分量、但将其他范围的频率分量衰减到极低水平的滤波器,与带阻滤波器的概念相对。一个模拟带通滤波器的例子是电阻-电感-电容电路(RLC)。这些滤波器也可以用低通滤波器同高通滤波器组合来产生。顾名思义,带通滤波器可以理解成为一个电子接口单元,这个单元…

    2025年9月22日
    4
  • Exception in thread “main” java.lang.SecurityException: Prohibited package name: java.io.test

    Exception in thread “main” java.lang.SecurityException: Prohibited package name: java.io.testException in thread “main” java.lang.SecurityException: Prohibited package name: java.io.test

    2022年4月24日
    80
  • 穿女装上班的大厂程序员:我知道自己是个男生「建议收藏」

    穿女装上班的大厂程序员:我知道自己是个男生「建议收藏」本文转载自程序员技术“三流码农写UI,二流码农写架构,一流码农写算法,顶级码农穿女装。”——互联网圈子里,一直流传着这样一句无从考证的段子。程序员穿女装,是一个神秘而热门的话题。大部分人都曾经道听途说过相关的故事,也有人在网络上看过“女装大佬”的照片,比如曾经微博非官方举办过一次“程序员女装大赛”,引起过很多程序员的围观。但是生活里,似乎很少看到真实的女装程序员的事例。当小众文化、性别、和互联网的职业交融在一起,他们经历过什么样的故事,产生过什么样…

    2022年7月25日
    8
  • 用C语言实现快速排序算法「建议收藏」

    用C语言实现快速排序算法「建议收藏」一、快速排序算法(Quicksort)1.定义快速排序由C.A.R.Hoare在1962年提出。快速排序是对冒泡排序的一种改进,采用了一种分治的策略。2.基本思想通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变成有序序列。3….

    2022年6月25日
    35
  • curl 模拟 GET\POST 请求,以及 curl post 上传文件「建议收藏」

    curl 模拟 GET\POST 请求,以及 curl post 上传文件「建议收藏」curl模拟GET\POST请求,以及curlpost上传文件一般情况下,我们调试数据接口,都会使用一个postman的工具,但是这个工具还是有点大了。事实上,我们在调试一些小功能的时候,完全没有必要使用它。在命令行中,我们使用curl这个工具,完全可以满足我们轻量的调试要求。下面,我们来简单的说一下,curl的一些常见使用方法:curlGET请求cu…

    2022年10月18日
    2
  • 约定俗成的版本号命名规则是什么_2017版命名规则

    约定俗成的版本号命名规则是什么_2017版命名规则版本号的格式为`X.Y.Z[主版本号.次版本号.修订号]`,版本号递增规则如下:1.`主版本号`:一般当软件整体重写,或出现不向后兼容的改变时,`主版本号递增1,次版本清零,修订号清零`,如1.9.1->2.0.0。2.`次版本号`:一般功能更新或者增加功能时,`主版本号不变,次版本号递增1,修订号不变`。3.`修订号`:当Bug修复发布时,`主版号不变,次版本号不变,修订号递增1`。开发一个新项目时一般以`0.1.0`作为你的初始化开发版本,并在后续的每次发行时

    2025年10月23日
    5

发表回复

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

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