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实现下载文件流完整前后端代码
Nov 17 Vue.js
vue在图片上传的时候压缩图片
Nov 18 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 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
星际争霸任务指南——神族
2020/03/04 星际争霸
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php向js函数传参的几种方法
2014/08/10 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
python爬虫之百度API调用方法
2017/06/11 Python
python3实现基于用户的协同过滤
2018/05/31 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
Python如何获取文件路径/目录
2020/09/22 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python