vue html img标签绝对路径,vue cli使用绝对路径引用图片问题的解决

前言

Vue是什么，是一套构建用户界面的渐进式框架(官网解释)，什么叫渐进式框架呢，简单回答就是主张最少，这些概念只能自己去看，自己去理解，一千个读者一千个哈姆雷特，不过多的解释。很全面的。

Vue是近两年来比较火的一个前端框架(渐进式框架吧)，本文将给大家详细介绍vue cli使用绝对路径引用图片问题的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看吧。

正文：

在页面中使用绝对路径可通过在js中用 require() 引入

样式里面似乎无法使用绝对路径，除非把图片资源都放到static里面，然后就可以这样引用

但，放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。

为了兼顾可以把图片资源优化，所以还是不适合把图片资源放到static，但，在vue页面style标签里面写样式随着目录的深入有可能引用路径是：

有个做法似乎可以省去一些麻烦：

把样式文件统一放到style文件夹里面，样式图片资源用相对路径，然后在style标签用src属性引入样式，这样就可以避免太多层的返回了~~~

总结

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

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！

vue html img标签绝对路径,vue cli使用绝对路径引用图片问题的解决相关推荐

vue为p标签_通过vue.js几个基本操作，理解一下什么是插槽「606」
更多的文章,请关注我的头条号,我是落笔承冰. 一.先创建一个test1.html文件,还是得在head里链接vue的库. 二.创建一个父组件一个全局子组件. 三.给子组件添加模板吧,然后在父组件里显示 ...
vue 修改模板{{}}标签_vue.js - Vue单文件的template标签
问题单文件中用template标签包含html模板内容,但我现在要用一个template标签+v-for来包含多个元素,此时webpack编译时报错了. 下面是vue文件部分内容: {{ bran ...
vue中更换标签页.ico图标报错路径找不到图片
需求如下 1.首先需要一张图片 2.在index.html页面 <link rel="shortcut icon" type="image/x-icon" ...
cli vue webpack 实战_Vuejs技术栈从CLI到打包上线实战全解析
前言本文是自己vue项目实践中的一些总结,针对Vue2及相关技术栈,实践中版本为2.3.3. 开发前须知 vue-cli 在开发前,我们要至少通读一遍vue官方文档和API(看官方文档是最重要的,胜 ...
(三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串在public中添加HBuilderX的打包配置文件manifest.json
Vue 项目打包发布移动 App--npm run build打包 & vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuil ...
vue中img标签404错误处理事件onerror
以下为图片链接失效的情况若服务上的图片直接在浏览器上可以打开,但是在img上报404错误处理方法在index.html中添加代码如下 <meta name="referrer&qu ...
vue 修改模板{{}}标签_详解Vue 动态添加模板的几种方法
以下方法只适用于 Vue1.0 版本,推荐系数由高到低排列. 通常我们会在组件里的 template 属性定义模板,或者是在*.vue文件里的 template 标签里写模板.但是有时候会需要动态生成 ...
vue中img标签onerror事件
vue中img标签onerror事件使用:onerror去绑定事件该方法能正确处理onerror事件,并防止闪图 <img type="image/x-icon" :sr ...
php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...

vue html img标签绝对路径,vue cli使用绝对路径引用图片问题的解决

vue html img标签绝对路径,vue cli使用绝对路径引用图片问题的解决相关推荐

最新文章

热门文章