vue实现在data里引入相对路径


Posted in Vue.js onJune 05, 2022

在data里引入相对路径

问题

在项目的HTML中引入图片的相对路径,这样写是能找到图片显示出来的:

<img src="../../../static/img/step-ongoing.png">

但图片太多感觉太乱了了,想在data中通过变量统一管理。这时发现如果直接在data中这样写图片是找不到的:

<img :src="stepOngoing">

data()  {
    return {
        stepOngoing: '../../../static/img/step-ongoing.png',
    }
}

解决

发现只有这么写才行,require内部引入:

data()  {
    return {
        stepOnGoing: require('../../../static/img/step-ongoing.png'),
    }
}

或者用import 在外部引入:

import stepOnGoing_src from '../../../static/img/step-ongoing.png'

data()  {
	return {
		stepOnGoing: stepOnGoing_src,
	}
}

如何在data中正常引入图片路径

在Vue项目中通过data设置图片路径,然后在template中引入后页面无法显示图片,浏览器控制台报错:

vue实现在data里引入相对路径

刚开始以为是路径出问题了,于是绝对路径、相对路径各种办法试了一遍,发现还是报错,后来才发现这是因为在Vue里动态生成的路径无法被url-loader解析到,

此时有两种解决方法

方法一:直接将你的图片源文件放在项目目录的static文件夹里,然后和正常写图片路径那样写就可以了:

vue实现在data里引入相对路径

vue实现在data里引入相对路径

方法二:通过import的方法将图片源路径引入,如下图所示:

vue实现在data里引入相对路径

vue实现在data里引入相对路径

需要注意的是:在Vue里图片是通过v-bind绑定src属性的,所以template模板上的img标签并不是src="",而是v-bind:src=""或简写为:src="",如果这里写错了,那无论如何都无法正常引入图片。

方法三:采用背景图做法,通过data将图片源路径引入,利用内联样式。

如下代码所示:

        <div :style="imgStyle"></div>
        data () {
             imgStyle: {
                  backgroundImage:`url(${require('@/assets/images/xxx.png')})`
             }
        }

如此也可将图片正常引入项目中并作为背景图使用。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 


Tags in this post...

Vue.js 相关文章推荐
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
ant design vue的form表单取值方法
Jun 01 #Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 #Vue.js
vue实现登陆页面开发实践
May 30 #Vue.js
vue router 动态路由清除方式
May 25 #Vue.js
vue如何清除浏览器历史栈
May 25 #Vue.js
vue3不同环境下实现配置代理
May 25 #Vue.js
vue使用element-ui按需引入
May 20 #Vue.js
You might like
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
php实现删除空目录的方法
2015/03/16 PHP
onpropertypchange
2006/07/01 Javascript
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
对Python信号处理模块signal详解
2019/01/09 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python中reload重载实例用法
2020/12/15 Python
python 对xml解析的示例
2021/02/27 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
类和结构的区别
2012/08/15 面试题
个人找工作求职简历的自我评价
2013/10/20 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android