关于vue单文件中引用路径的处理方法

2023-09-18 06:49:06 65

前言

Vue的单文件组件在使用Vue时非常常用，而在vue单文件的开发过程中，在单文件模版中可能会涉及到文件路径的处理，比如,style中的background的处理等。下文中讨论了几种不同场景下的的src处理，解释了在使用vue+webpack的开发过程中如何正确的引用静态资源（比如图片的处理）。

如下所示，在下面的单文件组件中给出了不同场景下引用图片路径的示例（图片静态资源存放在src/assets/small.png）：

上述代码片段给出了四种场景下使用img标签在vue单文件组件中引用图片资源的方式。当然，这四种方式并不是都可以正确的加载图片资源。

情况一：

在模版中直接以相对路径绑定到src属性，这种情况下可以正确加载图片资源。我们知道，在webpack处理vue单文件组件的过程中，主要是vue-loader来做针对*.vue文件的处理。vue-loader的文档中vue-loader的资源路径处理一节给出了vue-loader是如何处理模版中的资源路径的。比如：,background:url(),@import等都将被作为模块依赖处理。也就是说这几种情况下vue-loader自动处理路径的资源引用以及最后的路径替换。其中对img的处理如下：

将会被vue模版编译器编译为：

createElement('img',{attrs:{src:require('http://www.haoziyuan.cc./logo.png')}})

这也就解释了为什么情况一可以正确显示图片内容，是因为vue-loader自动帮我们做了资源引入以及路径替换问题。

情况二：

在模版中给src属性绑定了相对路径字符串变量，这种情况下图片无法正常显示。原因在于vue-loader无法识别变量是否为路径字符串，因此也就不存在vue-loader自动引入资源以及路径替换的问题了。这种情况下，编译后的模版依然为相对路径字符串。很显然，没有相应的资源引入以及错误的路径，是无法正确的展示图片的。

情况三：

很多人在相对路径无法正确显示的同时，尝试进行了使用绝对路径变量引入，显然这种情况下也是不能显示图片的，因为图片资源未被手动引入。注意：很多同学尝试手动引入资源然后按照绝对路径变量绑定src，发现dist/static/img/路径下确实有了被引用的资源，但是vue-cliwebpack模版中url-loader对于img类型的文件在加载时，添加了hash值的处理。在这种情况下，即使我们绑定的是绝对路径变量，因为无法正确匹配被添加hash值的图片文件，我们还是无法正确的引用到图片。在这种需要手动引入图片的情况下，推荐情况四的处理方式。

情况四：

在模版中src属性直接绑定手动引入的图片资源，这种情况下可以正确的显示图片。这样的方式也是vue-loader在处理自动引入路径对应的资源时使用的办法。

综上，在vue单文件组件中，正确的显示一个图片的关键：

该图片资源被require或import，即会被webpack的url-loader处理到最后的目录中
imgsrc属性需要被替换为最后的图片资源路径

以上两点缺一不可。情况一以及情况四最后之所以能够正确的显示了图片，就在于两种情况下满足了以上两个条件。情况一中vue-loader自动帮我们做了这个事情，情况四我们手动做了这个事情。

开发中可能遇到的问题：

开发中可能会遇到循环渲染一个图片列表的场景，根据上面的总结，我们可以构造一个图片信息对象数组，比如：

这样我们就可以完美的显示我们循环渲染的图片了。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

关于vue单文件中引用路径的处理方法

热门推荐

随机推荐