Vue中显示img图片,显示不出来怎么办?vue显示图片
Vue 图片 显示 怎么办 出来 img
2023-06-13 09:11:43 时间
大家好,又见面了,我是你们的朋友全栈君。
1、近期在学习Vue中发现了一个难点就是显示图片<img> 试了很多办法都不行,有的还保错。后来我找了很多人,以及网上找资料终于被我给找到了。
2、如何你是一个普通组件的话,那么这样就可以了
<img src="../assets/images/fk.jpg" width="100%">
上面这种是写死的,下面让我们试试进行动态显示;
或者这样写也可以:
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下面的路径../是访问不到的,那么可以试试使用下面
- @代替 src目录
- require(“@/assets/images/xxx.jpg”)
- 以上都不行,试试更换图片存放目录到 static 文件中
查询效果 ==》 Vue显示图片
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/151977.html原文链接:https://javaforall.cn
相关文章
- Vue新手入门指南(易懂)
- [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )
- Vue之Router(三)
- vue前端怎么导出图片_VUE中将页面导出为图片或者PDF
- vue判断map是否为空
- 彻底明白vue双向绑定底层原理(源码分析)
- VUE组件封装_vue组件内部双向绑定
- vue分页功能实现_vue登录功能
- 聊聊 Vue 的双端 diff 算法
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- Vue(renren-fast_vue_master)项目目录结构[通俗易懂]
- 今天讲vue讲解专栏里的VUE组件
- Vue中图片压缩的工具
- vue.js客服系统实时聊天项目开发(六)获取URL中的GET参数(支持/#/?单页锚点hash模式)
- vue静态图片不显示的问题
- Django simpleUI 修改 element-UI 引用的 index.js 和 index.css 链接 以及 base.html 的 vue 资源链接
- Vue Router
- 毕业设计So Easy:SpringBoot+Vue图书阅读和管理系统(前端+后端+小程序端)
- 前端常考vue面试题(必备)_2023-03-15
- Vue中使用webpack别名的方法详解编程语言
- 使用Vue技术从MSSQL中获取数据(vue获取mssql数据)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- Vue调用Redis体验更好的开发效率(vue能调redis吗)
- Vue操作Redis掌握前端数据管理利器(vue操作redis)
- 使用Vue和Redis创建完美的后台应用(vue redis后台)