脚本宝典收集整理的这篇文章主要介绍了

vue单文件中引用路径的处理

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<blockquote><p>原文地址:<a href="http://www.monster1935.com/2018/01/01/vue%E5%8D%95%E6%96%87%E4%BB%B6%E4%B8%AD%E5%BC%95%E7%94%A8%E8%B7%AF%E5%BE%84%E7%9A%84%E5%A4%84%E7%90%86/" rel="nofollow noreferrer" target="_blank">vue单文件中引用路径的处理</a><br />如有错误,欢迎指正!</p></blockquote> <p>vue单文件的开发过程中,在单文件模版中可能会涉及到文件路径的处理,比如 <code>&lt;img&gt;</code>, style 中的 background 的处理等。下文中讨论了几种不同场景下的 <code>&lt;img&gt;</code> 的 src 处理,解释了在使用 vue+webpack 的开发过程中如何正确的引用静态资源(比如图片的处理)。</p> <p>如下所示,在下面的单文件组件中给出了不同场景下引用图片路径的示例(图片静态资源存放在 src/assets/small.png ):</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div id=&quot;app&quot;> <!-- 1. 模版中src选项直接写相对路径 --><br /> <img src=&quot;./assets/small.png&quot; alt=&quot;图片相对路径测试&quot;><br /> <!-- 2. 模版中src选项绑定相对路径字符串 --><br /> <img :src=&quot;relative_img&quot; alt=&quot;图片相对路径测试&quot;><br /> <!-- 3. 模版中src选项绑定html绝对路径字符串 --><br /> <img :src=&quot;absolute_img&quot; alt=&quot;图片绝对路径测试&quot;><br /> <!-- 4. 模版中src选项绑定手动加载的图片资源 --><br /> <img :src=&quot;smallImg&quot; alt=&quot;图片资源测试&quot;> </div> <p></template></p> <p><script> import smallImg from './assets/small.png';</p> <p><a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'app', data() { return { smallImg: smallImg, relative_img: './assets/small.png', absolute_img: '/static/img/small.png', }; }, } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-comment">&lt;!-- 1. 模版中src选项直接写相对路径 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./assets/small.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"图片相对路径测试"</span>&gt;</span> <span class="hljs-comment">&lt;!-- 2. 模版中src选项绑定相对路径字符串 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"relative_img"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"图片相对路径测试"</span>&gt;</span> <span class="hljs-comment">&lt;!-- 3. 模版中src选项绑定html绝对路径字符串 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"absolute_img"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"图片绝对路径测试"</span>&gt;</span> <span class="hljs-comment">&lt;!-- 4. 模版中src选项绑定手动加载的图片资源 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"smallImg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"图片资源测试"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> smallImg <span class="hljs-keyword">from</span> <span class="hljs-string">'./assets/small.png'</span>; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'app'</span>, data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">smallImg</span>: smallImg, <span class="hljs-attr">relative_img</span>: <span class="hljs-string">'./assets/small.png'</span>, <span class="hljs-attr">absolute_img</span>: <span class="hljs-string">'/static/img/small.png'</span>, }; }, } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>上述代码片段给出了四种场景下使用 img 标签在 vue 单文件组件中引用图片资源的方式。当然,这四种方式并不是都可以正确的加载图片资源。</p> <p><strong>情况一:</strong></p> <p>在模版中直接以相对路径绑定到src属性,这种情况下可以正确加载图片资源。我们知道,在 webpack 处理 vue 单文件组件的过程中,主要是 vue-loader 来做针对 *.vue 文件的处理。vue-loader 的文档中 <a href="https://vue-loader.vuejs.org/zh-cn/configurations/asset-url.html" rel="nofollow noreferrer" target="_blank">vue-loader 的资源路径处理</a>一节给出了 vue-loader 是如何处理模版中的资源路径的。比如: <code>&lt;img src=""&gt;</code>, <code>background: url()</code>, <code>@import</code>等都将被作为<strong>模块依赖</strong>处理。也就是说这几种情况下 vue-loader 自动处理路径的资源引用以及最后的路径替换。其中对 img 的处理如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<img src=&quot;./logo.png&quot;>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./logo.png"</span>&gt;</span></code></pre> <p>将会被 vue 模版编译器编译为:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="createElement('img', { attrs: { src: require('./logo.png') }})" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;">createElement(<span class="hljs-string">'img'</span>, { <span class="hljs-string">attrs:</span> { <span class="hljs-string">src:</span> require(<span class="hljs-string">'./logo.png'</span>) }})</code></pre> <p>这也就解释了为什么情况一可以正确显示图片内容,是因为 vue-loader 自动帮我们做了资源引入以及路径替换问题。</p> <p><strong>情况二:</strong></p> <p>在模版中给 src 属性绑定了相对路径字符串变量,这种情况下图片无法正常显示。原因在于 vue-loader 无法识别变量是否为路径字符串,因此也就不存在 vue-loader 自动引入资源以及路径替换的问题了。这种情况下,编译后的模版依然为相对路径字符串。很显然,没有相应的资源引入以及错误的路径,是无法正确的展示图片的。</p> <p><strong>情况三:</strong></p> <p>很多人在相对路径无法正确显示的同时,尝试进行了使用绝对路径变量引入,显然这种情况下也是不能显示图片的,因为图片资源未被手动引入。<strong>注意:</strong> 很多同学尝试手动引入资源然后按照绝对路径变量绑定 src,发现 <code>dist/static/img/</code> 路径下确实有了被引用的资源,但是 vue-cli webpack 模版中 url-loader 对于 img 类型的文件在加载时,添加了 hash 值的处理。在这种情况下,即使我们绑定的是绝对路径变量,因为无法正确匹配被添加 hash 值的图片文件,我们还是无法正确的引用到图片。在这种需要手动引入图片的情况下,推荐情况四的处理方式。</p> <p><strong>情况四:</strong></p> <p>在模版中 src 属性直接绑定手动引入的图片资源,这种情况下可以正确的显示图片。这样的方式也是 vue-loader 在处理自动引入路径对应的资源时使用的办法。</p> <p>综上,在 vue 单文件组件中,正确的显示一个图片的关键:</p> <ul> <li>该图片资源被 require 或 import ,即会被 webpack 的 url-loader 处理到最后的目录中</li> <li>img src 属性需要被替换为最后的图片资源路径</li> </ul> <p>以上两点缺一不可。情况一以及情况四最后之所以能够正确的显示了图片,就在于两种情况下满足了以上两个条件。情况一中 vue-loader 自动帮我们做了这个事情,情况四我们手动做了这个事情。</p> <p><strong>开发中可能遇到的问题:</strong></p> <p>开发中可能会遇到循环渲染一个图片列表的场景,根据上面的总结,我们可以构造一个图片信息对象<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>,比如:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div id=&quot;app&quot;> <!-- 1. 模版中 src 选项直接写相对路径 --><br /> <img src=&quot;./assets/small.png&quot; alt=&quot;图片相对路径测试&quot;><br /> <!-- 2. 模版中 src 选项绑定相对路径字符串 --><br /> <img :src=&quot;relative_img&quot; alt=&quot;图片相对路径测试&quot;><br /> <!-- 3. 模版中 src 选项绑定绝对路径字符串 --><br /> <img :src=&quot;absolute_img&quot; alt=&quot;图片绝对路径测试&quot;><br /> <!-- 4. 模版中 src 选项绑定手动加载的图片资源 --><br /> <img :src=&quot;smallImg&quot; alt=&quot;图片测试&quot;><br /> <!-- 5. 循环加载图片资源示例 --><br /> <img v-for=&quot;image in imgList&quot; :key=&quot;image.id&quot; :src=&quot;image.src&quot; :alt=&quot;image.title&quot;> </div> <p></template></p> <p><script> import smallImg from './assets/small.png'; import bigImg from './assets/big.jpg';</p> <p><a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'app', data() { return { smallImg: smallImg, relative_img: './assets/small.png', absolute_img: '/static/img/small.png', imgList: [ { id: 1, title: 'test1', src: require('./assets/logo1.png') }, { id: 2, title: 'test2', src: require('./assets/logo2.png') }, { id: 3, title: 'test3', src: require('./assets/logo3.png') }, ], }; }, } </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">&lt;template&gt; &lt;div id="app"&gt; &lt;!-- 1. 模版中 src 选项直接写相对路径 --&gt; &lt;img src="./assets/small.png" alt="图片相对路径测试"&gt; &lt;!-- 2. 模版中 src 选项绑定相对路径字符串 --&gt; &lt;img :src="relative_img" alt="图片相对路径测试"&gt; &lt;!-- 3. 模版中 src 选项绑定绝对路径字符串 --&gt; &lt;img :src="absolute_img" alt="图片绝对路径测试"&gt; &lt;!-- 4. 模版中 src 选项绑定手动加载的图片资源 --&gt; &lt;img :src="smallImg" alt="图片测试"&gt; &lt;!-- 5. 循环加载图片资源示例 --&gt; &lt;img v-for="image in imgList" :key="image.id" :src="image.src" :alt="image.title"&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import smallImg from './assets/small.png'; import bigImg from './assets/big.jpg'; export default { name: 'app', data() { return { smallImg: smallImg, relative_img: './assets/small.png', absolute_img: '/static/img/small.png', imgList: [ { id: 1, title: 'test1', src: require('./assets/logo1.png') }, { id: 2, title: 'test2', src: require('./assets/logo2.png') }, { id: 3, title: 'test3', src: require('./assets/logo3.png') }, ], }; }, } &lt;/script&gt; </code></pre> <p>这样我们就可以完美的显示我们循环渲染的图片了。</p>

总结

以上是脚本宝典为你收集整理的

vue单文件中引用路径的处理

全部内容,希望文章能够帮你解决

vue单文件中引用路径的处理

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过