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


相关推荐

  • HashMap_java的hashcode方法

    HashMap_java的hashcode方法MurmurHash可以将一个字符串hash出一个碰撞率极低的long型数值,且效率很高packagecom.trs.util;importjava.nio.ByteBuffer;importjava.nio.ByteOrder;/***根据字符串生成long型数据id*@authoryush*2018年11月6日上午11:02:00*/publicclassAssetKeyU…

    2022年10月19日
    0
  • 关于 java JSONArray JSONObject转换问题

    关于 java JSONArray JSONObject转换问题importlhy.client.json.JSONArray;importlhy.client.json.JSONException;importlhy.client.json.JSONObject;publicclassMyJson{publicstaticvoidmain(String[]args)throwsJSO…

    2022年5月5日
    44
  • linux wine qq2017,20170506-linux下最新WineQQ8.9.1安装教程

    linux wine qq2017,20170506-linux下最新WineQQ8.9.1安装教程本次教程是我根据很多前辈的文章整理出来的。linux下安装QQ的方法有很多,比如用genymotion安装安卓版qq,或者购买crossover后安装deepinQQ,不过,最常用的还是使用wine安装QQ,不过如果用WineWindowsProgramLoader执行QQ安装程序的话会遇到很多BUG,比如无法输入用户名或者无法输入中文等。谈到wine不得不说一下winetricks和win…

    2022年9月4日
    2
  • 100个Python练手小程序[通俗易懂]

    100个Python练手小程序[通俗易懂]100个Python练手小程序,学习python的很好的资料,覆盖了python中的每一部分,可以边学习边练习,更容易掌握python。【程序1】题目:有1、2、3、4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少?1.程序分析:可填在百位、十位、个位的数字都是1、2、3、4。组成所有的排列后再去      掉不满足条件的排列。2.程序源代码:foriinrange(…

    2022年4月19日
    48
  • Linux文本处理神器awk实战案例

    Linux文本处理神器awk实战案例1.什么是awk2.打印不同列的内容3.打印行号和列号4.修改输入和输出分隔符5.输入多个文件6.修改某一列的值7.条件筛选后打印8.运算9.正则表达式

    2022年7月11日
    15
  • 你要偷偷学python(所有人都能学的数据分析课)

    标题无意冒犯,就是觉得这个广告挺好玩的上面这张思维导图喜欢就拿走,反正我也学不了这么多文章目录前言欢迎来到我们的圈子并发与串行前言前期回顾:我要偷偷学Python(第十二天)第十二篇的项目还在持续更新中,哎,日理万机虽然谈不上,但是也是手忙脚乱。这不,自动表单生成是写完了,但是学校网络实在是受不了啊,2G,测试不了,就只能一直搁置在那边了。明天就可以去测试了,明天出学校去逛逛。今天的内容,可能很多小伙伴会没有听过,今天要讲多线程的概念,以及协程的使用。后面看看能不能讲一下scrapy框架..

    2022年4月16日
    42

发表回复

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

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