vue中data引入相对路径会有什么问题,怎样解决-群英

上一篇：vue中data里的数据如何相互使用，相互引用可以吗下一篇：JS对象解构有何作用，操作是什么样的

这篇文章主要讲解了“vue中data引入相对路径会有什么问题,怎样解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“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中data引入相对路径会有什么问题,怎样解决”的文章就介绍到这了,更多相关vue中data引入相对路径会有什么问题,怎样解决内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！

标签： data引入相对路径

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：vue中data里的数据如何相互使用，相互引用可以吗下一篇：JS对象解构有何作用，操作是什么样的