vue中data里面数据相互引用,

　　本文主要介绍了vue实现中数据相对路径的引入，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　如何在数据中引入相对路径？有两种方法可以解决这个问题。

在data里引入相对路径

问题

　　在项目的HTML中引入图片的相对路径，这样可以找到图片并显示出来：

　　img src=./././static/img/step-proceeding . png

　　但是图片太多感觉太乱，想通过数据中的变量来管理。这个时候我发现，如果直接在数据里写这样的图，是找不到的：

　　img :src=逐步进行

　　data() {

　　返回{

　　正在进行的步骤： ./././static/img/step-proceeding . png ，

　　}

　　}

解决

　　只有当人们发现它是这样写的时候，才要求内部介绍：

　　data() {

　　返回{

　　正在进行的步骤：需要(./././static/img/step-continued . png )，

　　}

　　}

　　或外部导入：

　　从导入步骤进行中_src ./././static/img/step-proceeding . png

　　data() {

　　返回{

　　step pended:step pended _ src，

　　}

　　}

如何在data中正常引入图片路径

　　在Vue项目中，图片路径是由数据设置的，然后导入模板后页面无法显示图片。浏览器控制台报告错误：

　　一开始我以为是路径有问题，所以尝试了各种方法，绝对路径，相对路径，发现还是错误。后来发现这是因为Vue中动态生成的路径无法被url-loader解析。

此时有两种解决方法

　　方法一：把你的图片源文件直接放到项目目录的静态文件夹里，然后像正常的图片路径一样写：

　　方法二：导入图像来源路径，如下图所示：

　　需要注意的是，在Vue中，图片是通过v-bind绑定到src属性的，所以模板上的img标签不是src= ，而是v-bind:src= 或者简称：src= 。如果这里有错误，图像无论如何都无法正常引入。

　　方法三：采用背景图片方式，通过数据引入图片来源路径，使用内嵌样式。

　　代码如下：

　　div :style=imgStyle/div

　　data () {

　　imgStyle: {

　　background image:` URL($ { require( @/assets/images/XXX . png ))

　　}

　　}

　　这样，图片也可以正常引入到项目中，作为背景图片使用。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。