项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../这种形式

在打包build的设置路径assetsPublicPath: ‘./‘，然后那些没有转成base64的背景图都失效了，，路径。

处理方法：

　　使用require引入图片

img标签

<img :src="require('assets/img/header/search.png')">

背景图

<div :style="{backgroundImage:'url('+require('assets/img/common/bg.png')+')'}"></div>

　　

vue项目中打包background背景路径问题的更多相关文章

  1. vue项目中打包编译后，CSS样式【-webkit-box-orient: vertical】打包后丢失问题

    最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...

  2. Vue项目中v-bind动态绑定src路径不成功

    问题: 在做Vue项目的时候,由于项目需求,需要动态绑定img的src时,突然发现如果说是直接请求后台接口的图片地址就能显示, 但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候,图片 ...

  3. vue项目webpack打包后图片路径错误

    首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错 报的是404,路径前面多了/static/css,不知道为啥. 在自己慢 ...

  4. vue项目build打包后图片路径不对导致图片空白不显示问题解决方法

    1.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html. 2.具体配置过程如图: ...

  5. Vue项目的打包

    vue项目的打包 更改config文件夹下的index.js里的assetsPublicPath路径    将 “/”  改为  “./” build: { env: require('./prod. ...

  6. vue项目如何打包扔向服务器

    vue项目如何打包扔向服务器   当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放 ...

  7. Vue项目如何打包问题总结

    当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上. 先来描述一 ...

  8. 如何在Vue项目中，通过点击DOM自动定位VScode中的代码行？

    作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...

  9. vue项目 构建 打包 发布 三部曲

    一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了2.安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博 ...

随机推荐

  1. html readonly 和 disable 区别

    readonly 和 disable的区别Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(te ...

  2. 分布式消息队列 Celery 的最佳实践

    目录 目录 不使用数据库作为 Broker 不要过分关注任务结果 实现优先级任务 应用 Worker 并发池的动态扩展 应用任务预取数 保持任务的幂等性 应用任务超时限制 善用任务工作流 合理应用 a ...

  3. Jmeter之仅一次控制器

    在进行压测时,往往登录只需要一次,其他的接口需要循环测试.这里就会用到控制器中的仅一次控制器.只要放置在控制器的请求,不管在哪种情况下,都只执行一次. 1.名称:可以标识在该控制器下主要完成的 工作内 ...

  4. 工具类分享之获取Request/Response工具类《RequestContextHolderUtil》

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/aiyaya_/article/details/78975893前言在开发spring web项目时, ...

  5. 【ABAP系列】SAP ABAP DOI展示EXCEL或WORD

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP DOI展示EX ...

  6. tensorflow学习之搭建最简单的神经网络

    这几天在B站看莫烦的视频,学习一波,给出视频地址:https://www.bilibili.com/video/av16001891/?p=22 先放出代码 #####搭建神经网络测试 def add ...

  7. 【Windows Server存储】MBR和GPT分区表

    MBR和GPT分区表 分区表用于引导操作系统 master boot record(MBR)于1983年首次在PC上推出 最大4个主分区 2太空间 GUID Partition Table(GPT), ...

  8. docker 安装mysql 并将文件挂载到本地

    首先准备好挂载的文件路径 执行mysql创建以及挂载的命令(这里还可以使用-e环境变量来创建新用户MYSQL_USER,MYSQL_PASSWORD) docker run -d -p : --res ...

  9. docker--docker 的web可视化管理工具

    12 docker 的web可视化管理工具 12.1 常用工具介绍 当 Docker 部署规模逐步变大后,可视化监控容器环境的性能和健康状态将会变得越来越 重要. Docker的图形化管理工具,提供状 ...

  10. java8--- Predicate 意义 代码

    //为了去除 DiyInterface 这个函数式接口,可以用通用函数式接口 Predicate 替代如下: https://blog.csdn.net/u011848397/article/deta ...