项目中图片都放在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. 网站模板-AdminLTE：AdminLTE

    ylbtech-网站模板-AdminLTE:AdminLTE 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. https://adminlte.io/ 1. ...

  2. SAAS方法论

    内容来源:https://12factor.net/ 如今,软件通常会作为一种服务来交付,它们被称为网络应用程序,或软件即服务(SaaS).12-Factor 为构建如下的 SaaS 应用提供了方法论 ...

  3. Delphi XE2 之 FireMonkey 入门(37) - 控件基础: TControl 概览

    Delphi XE2 之 FireMonkey 入门(37) - 控件基础: TControl 概览 { TControl } public   constructor Create(...); ov ...

  4. Jmeter接口测试系列之测试用例编写和调用

    在使用Jmeter进行接口测试时,首先需要根据接口定义,编写响应的接口测试用例,在编写接口测试用例时,我们根据测试的侧重点不同,使用不同的方式编译测试用例. 一种是:整个请求参数作为一个变量,进行测试 ...

  5. shoi 魔法树

    Harry Potter新学了一种魔法:可以改变树上的果子个数.满心欢喜的他找到了一个巨大的果树,来试验他的新法术.这棵果树共有N个节点,其中节点0是根节点,每个节点u的父亲记为fa[u],保证有fa ...

  6. 五、Zabbix-自动注册

    一.Zabbix Serber 1.进入动作界面 配置—>动作—>事件源—>自动注册—>创建动作 2.配置自动注册动作 1.配置动作 2.配置操作 Next step 添加成功 ...

  7. 【监控实践】【4.2】perfmon监控性能计数器（基于typeperf命令）

    关键词:typeperf typeperf 命令 使用示例: 案例1:#使用typeperf收集windows cpu.内存.硬盘性能 #使用typeperf收集windows cpu.内存.硬盘性能 ...

  8. iview报错[Vue warn]: Error in render: "TypeError: ctx.injections.tableRoot.$scopedSlots[ctx.props.column.slot] is not a function"

    原因是我使用了iview的<Table>组件,我给Table组件的columns中定义了4个含有slot的列,但是实际在<Table>中只使用了其中3个,导致的报错. 也就是说 ...

  9. HDU 5266 pog loves szh III ( LCA + SegTree||RMQ )

    pog loves szh III Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Oth ...

  10. webshell查杀

    大部分Webshell查杀工具都是基于关键字特征的,通常他们会维护一个关键字列表,以此遍历指定扩展名的文件来进行扫描,所以可能最先想到的是各种字符串变形,下面总结了一些小的方法,各种不足之前还请看官拍 ...