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

更新时间：2022年06月05日 09:01:00 作者：zouyi_888

这篇文章主要介绍了vue实现在data里引入相对路径，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

在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里动态生成的路径无法被url-loader解析到，

此时有两种解决方法

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

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

需要注意的是：在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')})`
             }
        }

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue项目之安装引入使用vconsole方式(生产环境不显示)
在Vue2开发中,引入vConsole可以为移动端提供类似浏览器F12的调试工具,支持查看日志、网络请求等功能,vConsole是一个轻量、可拓展的前端调试面板,与框架无关,适用于多种前端框架,安装方法包括npm和CDN两种,可根据项目环境配置是否显示调试面板
2024-10-10
vue实现二级弹框案例
这篇文章主要为大家详细介绍了vue实现二级弹框案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
vue3.0使用mapState,mapGetters和mapActions的方式
这篇文章主要介绍了vue3.0使用mapState,mapGetters和mapActions的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
分享12个Vue开发中的性能优化小技巧(实用!)
一般来说,你不需要太关心vue的运行时性能,它在运行时非常快,但付出的代价是初始化时相对较慢,下面这篇文章主要给大家分享介绍了十二个Vue开发中的性能优化小技巧,需要的朋友可以参考下
2022-02-02
vue router 源码概览案例分析
这篇文章主要介绍了vue router 源码概览的案例分析，本文通过实例代码案例分析给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-10-10
前端vue2 element ui高效配置化省时又省力
这篇文章主要为大家介绍了前端高效配置化vue2 element ui省时又省力,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue3利用keepAlive缓存页面实例详解
<keep-alive> 是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在组件的父组件链中,下面这篇文章主要给大家介绍了关于vue3利用keepAlive缓存页面的相关资料,需要的朋友可以参考下
2022-11-11
vue实现列表左右联动效果
这篇文章主要为大家详细介绍了vue实现列表左右联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
浅析vue插槽和作用域插槽的理解
插槽，也就是slot，是组件的一块HTML模板，这块模板显示不现实、以及怎样显示由父组件来决定。这篇文章主要介绍了浅析vue插槽和作用域插槽的理解,需要的朋友可以参考下
2019-04-04
Vue配合Vant使用时area省市区选择器的使用方式
这篇文章主要介绍了Vue配合Vant使用时area省市区选择器的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01