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项目中遇到 Cannot find module ‘chalk‘ 报错的问题
这篇文章主要介绍了解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue和react中关于插槽详解，slot插槽是Vue对组件嵌套这种扩展机制的称谓，在react可以也这样称呼，但是并不很常见。不过叫slot确实很形象2022-08-08
本篇文章主要主要介绍了Vue的MVVM实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了vue中格式化element表格中的时间为指定格式,需要的朋友可以参考下2022-05-05
这篇文章主要给大家介绍了关于关闭eslint检查和ts检查的相关资料,eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了VUE中v-on:click事件中获取当前dom元素的代码，文中同时给大家提到了v-on：click获取当前事件对象元素的方法,需要的朋友可以参考下2018-08-08
这篇文章主要为大家详细介绍了如何在 Vue 项目中实现 Token 过期验证,并根据 Token 的有效期动态重定向用户到首页或登录页,感兴趣的小伙伴可以了解下2025-03-03
很高兴Vue 2.5 Level E 发布了。在这篇文章中，我们将重点介绍一些更重要的的变化：更好的 TypeScript 集成，更好的错误处理，更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染2017-10-10
在 Typescript 中使用可被复用的 Vue Mixin功能
这篇文章主要介绍了在 Typescript 中使用可被复用的 Vue Mixin功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vue动态添加路由后刷新页面白屏问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论