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中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
vue实现简易音乐播放器
Aug 14 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编程中八种常见的文件操作方式
2006/11/19 PHP
实用函数8
2007/11/08 PHP
php下使用以下代码连接并测试
2008/04/09 PHP
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
python实现flappy bird游戏
2018/12/24 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
写好自荐信要注意的问题
2013/11/10 职场文书
个人简历自我评价范文
2014/02/04 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
庆祝国庆节标语
2014/10/09 职场文书
趣味运动会广播稿
2015/08/19 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS