摘要：原文地址单文件中引用路径的处理如有错误，欢迎指正单文件的开发过程中，在单文件模版中可能会涉及到文件路径的处理，比如中的的处理等。的文档中的资源路径处理一节给出了是如何处理模版中的资源路径的。
原文地址：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("./logo.png") }})
这也就解释了为什么情况一可以正确显示图片内容，是因为 vue-loader 自动帮我们做了资源引入以及路径替换问题。
情况二：
在模版中给 src 属性绑定了相对路径字符串变量，这种情况下图片无法正常显示。原因在于 vue-loader 无法识别变量是否为路径字符串，因此也就不存在 vue-loader 自动引入资源以及路径替换的问题了。这种情况下，编译后的模版依然为相对路径字符串。很显然，没有相应的资源引入以及错误的路径，是无法正确的展示图片的。
情况三：
很多人在相对路径无法正确显示的同时，尝试进行了使用绝对路径变量引入，显然这种情况下也是不能显示图片的，因为图片资源未被手动引入。注意： 很多同学尝试手动引入资源然后按照绝对路径变量绑定 src，发现 dist/static/img/ 路径下确实有了被引用的资源，但是 vue-cli webpack 模版中 url-loader 对于 img 类型的文件在加载时，添加了 hash 值的处理。在这种情况下，即使我们绑定的是绝对路径变量，因为无法正确匹配被添加 hash 值的图片文件，我们还是无法正确的引用到图片。在这种需要手动引入图片的情况下，推荐情况四的处理方式。
情况四：
在模版中 src 属性直接绑定手动引入的图片资源，这种情况下可以正确的显示图片。这样的方式也是 vue-loader 在处理自动引入路径对应的资源时使用的办法。
综上，在 vue 单文件组件中，正确的显示一个图片的关键：
该图片资源被 require 或 import ，即会被 webpack 的 url-loader 处理到最后的目录中
img src 属性需要被替换为最后的图片资源路径
以上两点缺一不可。情况一以及情况四最后之所以能够正确的显示了图片，就在于两种情况下满足了以上两个条件。情况一中 vue-loader 自动帮我们做了这个事情，情况四我们手动做了这个事情。
开发中可能遇到的问题：
开发中可能会遇到循环渲染一个图片列表的场景，根据上面的总结，我们可以构造一个图片信息对象数组，比如：
这样我们就可以完美的显示我们循环渲染的图片了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/90719.html
摘要：而多页面应用的入口文件是所有需要用到的页面。单文件应用和多文件应用上，是大同小异的，区别就讨论到这里了。 1.前言 这几天，都遇到过有人问过相似的问题，就是用vue和webpack搭建目录的时候，怎么把单页面应用的配置改成多文件应用，或者是怎么把多文件应用的配置改成单文件应用。这个情况，我之前有处理过，公司的同事教过我，我就针对这个情况写下此篇文章。各位如果觉得我哪里写得不够好，写错了...
摘要：是中的条件指令，根据返回的布尔值动态添加或移除元素。传值方式我是标题需要在中定义函数传的值为字符串，不需要前缀传的值为非字符串数字布尔值函数数组对象，为前缀，值为表达式计算结果在程序中，如引用的值。为该组件内，元素绑定的事件处理函数。 视图 包含内容#NavigationBar、#TabBar、#MainContext； 为什么#NavigationBar、#TabBar分在Layou...
摘要：由于公司的前端开始转向，最近开始使用这个框架进行开发，遇到一些问题记录下来，以备后用。查了一下，发现可能是打包或是资源引用问题，目前该问题还未被妥善处理，需要通过一些来解决这个问题。为解决这个问题，中提供了方法对象受现 showImg(https://segmentfault.com/img/bVFgor?w=1280&h=720); 由于公司的前端开始转向 VueJS，最近开始使用这...
摘要：如果没有文件，则读取文件夹下的或者。如果都都找不到，抛出错误。 JS表达式 函数（方法）调用表达式 test() //函数调用表达式 属性调用表达式 var obj = {name:wt}; var arr = [123,bai]; obj.name //属性调用表达式 arr[0] //属性调用表达式 变量（常量）调用表达式 let name = wutao; name ...
摘要：放置在目录下或通过绝对路径被引用。对于相关来说，我们推荐使用而不是直接链式指定。在不更改配置文件的情况下，前端页面迭代发布，不需要重启服务。 作者：gauseen 0. 关于 Vuejs 简介：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，易用、灵活、高效。 生态系统 项目 介绍 awesome-vue Vue.js 相关很棒的...
阅读 2536·2023-04-25 19:47
阅读 3383·2019-08-29 17:18
阅读 855·2019-08-29 15:26
阅读 3359·2019-08-29 14:17
阅读 1112·2019-08-26 13:49
阅读 3337·2019-08-26 13:22
阅读 3021·2019-08-26 10:44
阅读 2692·2019-08-23 16:51
