纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

Curious   2021-03-28 我要评论
想了解关于vue单文件中引用路径的处理方法的相关内容吗Curious在本文为您仔细讲解vue单文件中引用路径的处理方法的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue,引用路径,vue,文件路径,vue,引用图片路径下面大家一起来学习吧

前言

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

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

<template>
 <div id="app">
 <!-- 1. 模版中src选项直接写相对路径 -->
 <img src="./assets/small.png" alt="图片相对路径测试">
 <!-- 2. 模版中src选项绑定相对路径字符串 -->
 <img :src="relative_img" alt="图片相对路径测试">
 <!-- 3. 模版中src选项绑定html绝对路径字符串 -->
 <img :src="absolute_img" alt="图片绝对路径测试">
 <!-- 4. 模版中src选项绑定手动加载的图片资源 -->
 <img :src="smallImg" alt="图片资源测试">
 </div>
</template>
<script>
import smallImg from './assets/small.png';
export default {
 name: 'app',
 data() {
 return {
 smallImg: smallImg,
 relative_img: './assets/small.png',
 absolute_img: '/static/img/small.png',
 };
 },
}
</script>

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

情况一:

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

<img src="./logo.png">

将会被 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 自动帮我们做了这个事情情况四我们手动做了这个事情

开发中可能遇到的问题:

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

<template>
 <div id="app">
 <!-- 1. 模版中 src 选项直接写相对路径 -->
 <img src="./assets/small.png" alt="图片相对路径测试">
 <!-- 2. 模版中 src 选项绑定相对路径字符串 -->
 <img :src="relative_img" alt="图片相对路径测试">
 <!-- 3. 模版中 src 选项绑定绝对路径字符串 -->
 <img :src="absolute_img" alt="图片绝对路径测试">
 <!-- 4. 模版中 src 选项绑定手动加载的图片资源 -->
 <img :src="smallImg" alt="图片测试">
 <!-- 5. 循环加载图片资源示例 -->
 <img
 v-for="image in imgList"
 :key="image.id"
 :src="image.src"
 :alt="image.title">
 </div>
</template>
<script>
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') },
 ],
 };
 },
}
</script>

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

总结

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


相关文章

猜您喜欢

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式