标题说的很清楚了,就是要使用public中的图片

  • 那么为什么要把图片放到public中呢,其实官网上面也说了,要么是需要动态引入非常多的图片,特别是小图标,如果放在assert中的话,会被webpack处理,很可能被打成base64混合到app.js里面

    这样就导致这个js文件比较大,
  • 因为动态引入,肯定是有很多不需要的图片,这样就有可能导致浪费,多下载了不需要的图片,所以就有把图片放public这么一说。
  • 具体做法呢其实参照官方来就很靠谱,具体来贴下我自己的配置

    ` publicPath: process.env.NODE_ENV === "production" ? "/xxx/xx/xxx/xx/x/" : "/", //说明一下啊,这里的xx/xx/xx/就是你实际部署的路径,比如,我的部署路径是www.baidu.com/test/k1/k2/index.html ,那么这里就写 /test/k1/k2/

    assetsDir: "static",

    然后,具体使用中就如下

    // 比如,xx组件




data() {

return {

publicPath: process.env.BASE_URL

};

},

computed: {

calcUrl() {

let dataState = this.dataStatus,

fruitNum = this.fruitNum;

return this.publicPath + "fruit/red.png";

}

},

`

这样就好了,做起来呢也不难是吧,之前在public哪里走了弯路,以为只需要写最后一个文件夹的名字就好,现在想想太傻逼了,哈哈。

好了,到此结束,如果有任何疑问或者错误,反应留言反馈!!

vue-cli3或者4中如何正确的使用public中的图片的更多相关文章

  1. springboot 中如何正确在异步线程中使用request

    起因: 有后端同事反馈在异步线程中获取了request中的参数,然后下一个请求是get请求的话,发现会偶尔出现参数丢失的问题. 示例代码: @GetMapping("/getParams&q ...

  2. Java导包后在测试类中执行正确但在Servlet中执行错误报ClassNotFoundException或者ClassDefNotFoundException解决办法

    将原来导的包remove from build path,并复制到Web-root下的lib目录中,再add to build path,

  3. vue@cli3 项目模板怎么使用public目录下的静态文件,找了好久都不对,郁闷!

    作为图片最好放在static目录下,但是vue@cli3没有static,网上都说放在public目录下,行,那就放吧,可问题是图片放了怎么使用 第一次尝试 肯定用绝对路径这就不说了,用相对路径,we ...

  4. 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求

    最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...

  5. Vue Cli3 中别名的配置问题

    Vue Cli3 中别名的配置问题 vue-cli3中是没有config.build等目录的,这是因为vue-cli3中将这些配置隐藏起来了,如果想要修改,可以在vue.config.js文件中进行修 ...

  6. @vue/cli3中解决Elint中console.log报错的问题

    方法一:package.json中”eslintConfig”>"rules”字段添加如下代码 "no-console": "off", &qu ...

  7. vue cli3以上的项目中如何使用axois请求本地json文件

    首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求 ...

  8. vue cli3 创建的项目中eslint 配置 问题的解决

    1--   vue cli3 项目文件结构 2-- 注释问题 在eslintrc.js 文件中,将 '@vue/standard' 注释后重启即可: 3-- 配置 eslint 文件 在 vue-cl ...

  9. 前端学习笔记系列一:11@vue/cli3.x中实现跨域的问题

    由于浏览器的同源访问策略,vue开发时前端服务器通常与后端api服务器并非是相同的服务器,因此需要使用一个代理服务器实现跨域访问.在@vue/cli3.x根目录下创建一个vue.config.js文件 ...

随机推荐

  1. Clickhosue 强大的函数,argMin() 和argMax()函数

    说实话,我喜欢Clickhouse 的函数,简单操作,功能强大.今天需要给大家介绍两个函数,argMin(),argMax() 1.argMax():计算 ‘arg’ 最大值 ‘val’ 价值. 如果 ...

  2. php安装igbinary扩展(windows)

    pecl.php.net 是php的扩展仓库,访问此网站后,搜索需要安装的扩展,截图如下: igbinary: http://pecl.php.net/package/redis github的网址: ...

  3. ST函数(ST表)RMQ O(1)查询 离线

    ST算法是基于倍增的动态规划算法. #include<iostream> #include<cstdio> #include<cstdlib> #include&l ...

  4. checked 完整版全选,单选,反选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel= ...

  5. STL之内存管理

    STL以泛型思维为基础,提供了6大组件:容器(containers).算法(algorithms).迭代器(iterators).仿函数(functors).适配器(adapters).分配器(all ...

  6. 多阶段构建Golang程序Docker镜像

    Docker简介 Docker是基于Linux容器技术(LXC),使用Go语言实现的开源项目,诞生于2013年,遵循Apache2.0协议.Docker自开源后,受到广泛的关注和讨论. Docker在 ...

  7. Java——IO流超详细总结

    该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形成自己的知识框架. 在初学Java时,I ...

  8. sshd: no hostkeys available — exiting

    在开启SSHD服务时报错.sshd re-exec requires execution with an absolute path用绝对路径启动,也报错如下:Could not load host ...

  9. 王颖奇 201771010129 《面向对象程序设计(java)》第二周学习总结

    <面向对象程序设计(java)>第二周学习总结 王颖奇 201771010129 第一部分:实验目的与要求 ①理论部分目的与要求 (1)基本知识(2)数据类型(3)变量(4)运算符(5)类 ...

  10. docker环境中neo4j导入导出

    neo4j 官方文档有说明,使用 neo4j-admin restore / dump 导出和恢复数据库的时候需要停掉数据,否则会报数据库正在使用的错误:command failed: the dat ...