作为图片最好放在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目录下的静态文件,找了好久都不对,郁闷!的更多相关文章

  1. vue@cli3 public目录下的静态图片,如何使用在css类文件中(sass可行,纯css不行)

    之前写了一篇vue文件怎么使用的文章,有人问我怎么在css文件中使用public下的文件,这是个好问题,因为我之前都没有研究过 需要解决的2个问题 一开始按照vue文件的使用方式(https://ww ...

  2. MVC项目中,如何访问Views目录下的静态文件!

    <!--注意,是system.webServer节点,而非system.web--><system.webServer> <handlers> <add na ...

  3. vue cli3项目发布在apache www/vue目录下并配置history路由

    注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue ...

  4. 【TP5.0】引入public/static目录下的静态资源

    1.假设tp5 下只有一个项目,且application在tp5下, 2.我们知道 外界访问tp5项目,只能通过public/index.php的入口文件,且查看apache服务器我们知道, [DOC ...

  5. Laravel - 上手实现 - 文件上传、保存到 public 目录下

    1.为了访问方便,将上传的文件保存在 public 目录下,需要进行修改配置. 找到 config/filesystems.php 文件然后修改 root.具体如下: 'local' => [ ...

  6. 『vue踩坑日常』 在index.html中引入静态文件不生效

    Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...

  7. 微软BI 之SSIS 系列 - 在 SSIS 中将指定目录下的所有文件分类输出到不同文件夹

    开篇介绍 比如有这样的一个需求,旧的一个业务系统通常将产出的文件输出到同一个指定的目录下的不同子目录,输出的文件类型有 XML,EXCEL, TXT 这些不同后缀的文件.现在需要在 SSIS 中将它们 ...

  8. [Erlang27]如何监控指定目录下的*.beam文件,如果有改动就更新到指定的节点?

    在Erlang In Anger第二章中讲到使用rebar来创建一个Erlang项目(Application或Project) 但美中不足的只是给出了指引,但没有给出详细的步骤. 下面我们就使用reb ...

  9. [转]gnome环境中将家目录下预设的文件夹由中文名称改为英文名称

    参考文章:gnome环境中将家目录下预设的文件夹由中文名称改为英文名称 打开终端 1 修改语言环境为英文 export LANG=en_US 如果想修改语言环境为日语,可执行 export LANG= ...

随机推荐

  1. C#中使用jieba.NET、WordCloudSharp制作词云图

    目录 词云简介 准备工作 基本算法 算法实现 运行测试 参考资料 词云简介 "词云"由美国西北大学新闻学副教授.新媒体专业主任里奇·戈登(Rich Gordon)于2006年最先使 ...

  2. Linux系统下Java 转换Word到PDF时,结果文档内容乱码的解决方法

    本文分享在Linux系统下,通过Java 程序代码将Word转为PDF文档时,结果文档内容出现乱码该如何解决.具体可参考如下内容: 1.问题出现的背景 在Windows系统中,使用Spire.Doc ...

  3. 带标签的for循环

    for循环可以加标签,使用break或者continue时,若存在多层嵌套循环可指定标签的for循环 public class ForLabel { public static void main(S ...

  4. mysql查看当前连接数

    show status like 'Threads%';   需要root权限才能看到所有的连接

  5. shell常识

    1 #!/bin/bash 2 : << ! 3 #使用变量 4 your_name="qinjx" 5 echo $your_name 6 echo ${your_n ...

  6. IOS真机调试找不到设备:ERROR: Could not connect to lockdownd, error code -[x]

    报错信息: Could not connect to lockdownd, error code -3 解决方法:修改var/db/lockdown文件夹的读写权限 在终端找到文件夹cd var/db ...

  7. JS替换字符

    var msg='A|B|C|D|E|F|G'; 方式1: var newMsg=msg.replace("|",""); 方式2: ps:适用特殊字符 var ...

  8. 数据增广imgaug库的使用

    记录一下这两天用imgaug库做数据增广的代码,由于是算用算学的,所以只能把代码写出来,具体每种增广算法的原理和一些参数就不得而知了,不过我觉得也没必要把这么些个算法搜搞懂,毕竟重点是扩种数据.所以, ...

  9. 常见的Web攻击手段,拿捏了!

    大家好,我是小菜. 一个希望能够成为 吹着牛X谈架构 的男人!如果你也想成为我想成为的人,不然点个关注做个伴,让小菜不再孤单! 本文主要介绍 互联网中常见的 Web 攻击手段 如有需要,可以参考 如有 ...

  10. 连通图与Tarjan算法

    引言 Tarjan算法是一个基于深度优先搜索的处理树上连通性问题的算法,可以解决,割边,割点,双连通,强连通等问题. 首先要明白Tarjan算法,首先要知道它能解决的问题的定义. 连通图 无向图 由双 ...