vue@cli3 项目模板怎么使用public目录下的静态文件,找了好久都不对,郁闷!
作为图片最好放在static目录下,但是vue@cli3没有static,网上都说放在public目录下,行,那就放吧,可问题是图片放了怎么使用
第一次尝试
肯定用绝对路径这就不说了,用相对路径,webpack会解析成base64,可是绝对路径怎么输都不对,咋回事
后面看网上说把前面路径下的public路径去掉,好,开发环境没问题了,可打包报错怎么办,就这个我研究了好久。
解决问题
网上一大堆牛头不对马嘴的,我也是无语了
最后的最后,终于官网找到了完美的解决方案
如此设置,完美解决问题,如果你留心观察过,你会发现,index.html文件的ico图标就已经这么使用了
<template>
<div class="er">
<el-scrollbar style="height:100%">
<div class="ds">
<img
class="sdde"
:src='`${publicPath}imges/but_play.png`'
>
</div>
</el-scrollbar>
</div>
</template>
<script>
export default {
data() {
return {
publicPath: process.env.BASE_URL
}
},
components: {
}
}
</script>
vue@cli3 项目模板怎么使用public目录下的静态文件,找了好久都不对,郁闷!的更多相关文章
- vue@cli3 public目录下的静态图片,如何使用在css类文件中(sass可行,纯css不行)
之前写了一篇vue文件怎么使用的文章,有人问我怎么在css文件中使用public下的文件,这是个好问题,因为我之前都没有研究过 需要解决的2个问题 一开始按照vue文件的使用方式(https://ww ...
- MVC项目中,如何访问Views目录下的静态文件!
<!--注意,是system.webServer节点,而非system.web--><system.webServer> <handlers> <add na ...
- vue cli3项目发布在apache www/vue目录下并配置history路由
注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue ...
- 【TP5.0】引入public/static目录下的静态资源
1.假设tp5 下只有一个项目,且application在tp5下, 2.我们知道 外界访问tp5项目,只能通过public/index.php的入口文件,且查看apache服务器我们知道, [DOC ...
- Laravel - 上手实现 - 文件上传、保存到 public 目录下
1.为了访问方便,将上传的文件保存在 public 目录下,需要进行修改配置. 找到 config/filesystems.php 文件然后修改 root.具体如下: 'local' => [ ...
- 『vue踩坑日常』 在index.html中引入静态文件不生效
Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...
- 微软BI 之SSIS 系列 - 在 SSIS 中将指定目录下的所有文件分类输出到不同文件夹
开篇介绍 比如有这样的一个需求,旧的一个业务系统通常将产出的文件输出到同一个指定的目录下的不同子目录,输出的文件类型有 XML,EXCEL, TXT 这些不同后缀的文件.现在需要在 SSIS 中将它们 ...
- [Erlang27]如何监控指定目录下的*.beam文件,如果有改动就更新到指定的节点?
在Erlang In Anger第二章中讲到使用rebar来创建一个Erlang项目(Application或Project) 但美中不足的只是给出了指引,但没有给出详细的步骤. 下面我们就使用reb ...
- [转]gnome环境中将家目录下预设的文件夹由中文名称改为英文名称
参考文章:gnome环境中将家目录下预设的文件夹由中文名称改为英文名称 打开终端 1 修改语言环境为英文 export LANG=en_US 如果想修改语言环境为日语,可执行 export LANG= ...
随机推荐
- 高性能内存图数据库RedisGraph(三)
这篇文章,我将介绍截止目前,RedisGraph的最新版本(v2.4)对Cypher语言的支持情况. 1.模式(patterns) RedisGraph已支持Cypher中所有的模式. 2.类型(ty ...
- P6295 有标号 DAG 计数
P6295 有标号 DAG 计数 题意 求 \(n\) 个点有标号弱联通 DAG 数量. 推导 设 \(f_i\) 表示 \(i\) 个点有标号 DAG 数量(不保证弱联通),有: \[f(i)=\s ...
- informix常用函数
一.常用函数 1.decimal decimal(14,2):14位数,小数占两位:decimal(26,8),有效长度为26,小数位占8位. 2.cast cast:Oracle中的数据类型转换函数 ...
- C++第四十二篇 -- CPU Usage
前言 目的:读取并控制CPU占用率 近期在做CPU Usage方面的事情,让CPU以一种高占用率的状态运行一定的时间,需要读取CPU各个核的占用率,网上关于这方面的资料好少,FQ也只找到了一个WMI的 ...
- Qt 入门 ---- 如何在程序窗口显示图片?
步骤: 1. 选择资源(准备图片) 2. 加载资源(导入图片) 3. 使用资源(显示图片) 具体操作流程: ① 从网上寻找合适的图片素材,下载到本地,在项目根目录下创建一个images文件夹存储程序中 ...
- 跳转页面携带数据方法 js
跳转页面 代码 function returnParent() { var arrReturn = new Array(); var tSel = LAAccountsGrid.getSelNo(); ...
- JVM 内存分配、调优案例
内存分配 对象优先在Eden区分配 大多数情况下,对象在新生代Eden区中分配.当Eden区没有足够空间进行分配时,虚拟机将发起一次Minor GC. HotSpot虚拟机提供了-XX:+PrintG ...
- 两万字长文,彻底搞懂Kafka!
1.为什么有消息系统 1.解耦合 2.异步处理 例如电商平台,秒杀活动. 一般流程会分为: 风险控制 库存锁定 生成订单 短信通知 更新数据 通过消息系统将秒杀活动业务拆分开,将不急需处理的业务放在后 ...
- JQuery常用属性操作,动画,事件绑定
jQuery 的属性操作 html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样. text() 它可以设置和获取起始标签和 ...
- linux c语言学习笔记之守护进程
哈尔滨理工大学软件工程专业08-7李万鹏原创作品,转载请标明出处 http://blog.csdn.net/woshixingaaa/archive/2010/06/06/5651095.aspx 守 ...