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)
上一篇 2022年6月21日 上午9:36
下一篇 2022年6月21日 上午9:36


相关推荐

  • SpringBoot 源码编译「建议收藏」

    SpringBoot 源码编译「建议收藏」SpringBoot源码编译1、从GitHub上下载源码https://github.com/spring-projects/spring-boot/tree/2.1.x下载源码的下面有关于编译源码的介绍:SpringBoot官方建议使用./mvnwcleaninstall或者标准的mvncleaninstall命令来编译源代码,如果要使用标准的mvn命令的话…

    2022年6月11日
    27
  • 数据挖掘概念与技术_第三版_课后习题「建议收藏」

    数据挖掘概念与技术_第三版_课后习题「建议收藏」写在前面该文为数据挖掘概念与技术第三版课后习题的答案,部分参考了第二版的英文答案,由于个人水平有限,如若存在纰漏,请在评论区批评指正。另外,由于本次编辑格式较乱,可在资源下载区下载PDF版本以便参考。第一章引论什么是数据挖掘?在你的回答中,强调以下问题:1) 它是又一种噱头吗?2) 它是一种从数据库、统计学、机器学习和模式识别发展而来的技术的简单转换或应用吗?3) 我们提出了一种…

    2022年6月29日
    24
  • 科大讯飞“AI伴学伙伴”暑期上新

    科大讯飞“AI伴学伙伴”暑期上新

    2026年3月14日
    2
  • 一个喜欢研究车的80后开车人,自己的经验和感受英语_开老车的年轻人

    一个喜欢研究车的80后开车人,自己的经验和感受英语_开老车的年轻人1. 白色车,安全系数最高。       澳大利亚研究者新近发布调查报告,黑色汽车在白天与黑夜的事故率均高居榜首。在白天,黑色汽车比白色汽车事故率高12%,在黎明前和黄昏后则高47%。       特别是傍晚的时候,远处跑来一辆黑色轿车,总感觉像穿了隐形衣,我还是比较喜欢白色车,总是很显眼。在民间还有一种说法,白色汽车油耗低,原因是车…

    2025年11月6日
    5
  • mysql脑裂_keepalived的脑裂问题

    mysql脑裂_keepalived的脑裂问题1 什么是脑裂脑裂 split brain 指在一个高可用 HA 系统中 当联系着的两个节点断开联系时 本来为一个整体的系统 分裂为两个独立节点 这时两个节点开始争抢共享资源 结果会导致系统混乱 数据损坏 对于无状态服务的 HA 无所谓脑裂不脑裂 但对有状态服务 比如 MySQL 的 HA 必须要严格防止脑裂 2 解决 keepalived 脑裂问题检测思路 正常情况下 keepalived 的 VIP 地址是在

    2026年3月16日
    3
  • 矩阵特征值分解(EDV)与奇异值分解(SVD)在机器学习中的应用

    目录特征分解定义(来自百度百科词条:特征分解)特征分解(Eigendecomposition),又称谱分解(Spectraldecomposition)是将矩阵分解为由其特征值和特征向量表示的矩阵之积的方法。需要注意只有对可对角化矩阵才可以施以特征分解。(来自百度百科词条:矩阵特征值)什么是特征值,特征向量?设A是n阶方阵,如果数λ和n维非零列向量x使关系式Ax=λx成立,那么这样的数λ称为矩阵A特征值,非零向量x称为A的对应于特征值λ的特征向量。式Ax=λx也可写成(A-λE)X=0。这是

    2022年4月5日
    51

发表回复

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

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