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


相关推荐

  • Qt学习笔记#4:QTimer和QTime

    QTimerClassQTimer是一个计时器类它的使用分三步,创建对象,连接signal和slot函数,start()QTimer*timer=newQTimer(this);connect(timer,SIGNAL(timeout()),this,SLOT(update()));timer->start(1000);其中,SIGNAL(timeou

    2022年4月16日
    50
  • 怎样用python求平均值_如何用python求平均值【Python教程】,python平均值[通俗易懂]

    进修了Python相干数据类型,函数的学问后,应用字符串的支解完成了输入恣意多个数据,并盘算其平均值的小顺序。思绪是吸收输入的字符串,以空格为分隔符,将支解的数据存入列表(lst1)中,将lst1中的数据转存入另一个空列表(lst)中,转存时将字符串转化为整型,从而应用函数求出lst中数的和、平均值。print(“—–求平均值,可输入恣意多个数——-“)lst=[]#定义一个…

    2022年4月9日
    49
  • td-scdma/wcdma是什么意思_CDMA频段

    td-scdma/wcdma是什么意思_CDMA频段1.概述比较项目:核心网部分的异同接入网部分的差别业务提供上的异同2.核心网比较TD-SCDMA技术被3GPPR4采纳,因此在R4的核心网部分,TD-SCDMA与WCDMA没有差异:ØTD-SCDMA在核心网方面所用到的接口和主要协议与WCDMA一致。Ø在3GPP核心网中所提供的业务并没有将TD-SCDMA同WCDMA进行区分。Ø

    2022年10月3日
    3
  • C#单纯的字母数字ASCII码转换

    字母转换成数字byte[]array=newbyte[1];//定义一组数组arrayarray=System.Text.Encoding.ASCII.GetBytes(string

    2021年12月27日
    44
  • memset库函数「建议收藏」

    memset库函数「建议收藏」头文件:#include定义函数:void*memset(void*s,intc,size_tn);函数说明:memset()会将参数s所指的内存区域前n个字节以参数c填入,然后

    2022年8月5日
    8
  • js 除法 取整「建议收藏」

    js 除法 取整「建议收藏」1.丢弃小数部分,保留整数部分 js:parseInt(7/2) 2.向上取整,有小数就整数部分加1 js:Math.ceil(7/2) 3,四舍五入. js:Math.round(7/2) 4,向下取整 js:Math.floor(7/2)都是JS内置对象

    2022年6月21日
    98

发表回复

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

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