项目中图片都放在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. docker镜像和加速

    首先,需要明确一个问题:Mirror 与 Private Registry 有什么区别? Private Registry 是开发者或者企业自建的镜像存储库,通常用来保存企业内部的 Docker 镜像 ...

  2. 【mysql】如何通过navicat配置表与表的多对一关系，一对一关系？设计外键的效果

    背景: 现在要将接口自动化测试结果持久化,当前只是每次运行接口测试,将测试结果通过邮件发送给项目组成员.邮件内容如下: 表设计: 为了呈现这个结果:我设计了2张表run_result和run_deta ...

  3. Octavia 创建 loadbalancer 的实现与分析

    目录 文章目录 目录 从 Octavia API 看起 Octavia Controller Worker database_tasks.MapLoadbalancerToAmphora comput ...

  4. 测开之路一百五十二：基于jquery的ajax实现之load、get、ajax

    ajax除了用原生的js实现之外,也可以使用jquery实现,而且用jquery更方便 看一个简单的示例,保留上一篇的content路由和html,实现上一篇一样的功能,点击获取内容,局部刷新 准备一 ...

  5. 中国MOOC_零基础学Java语言_第5周 数组_1多项式加法

    第5周编程题 查看帮助 返回   第5周编程题 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截 ...

  6. 如何通过shell脚本或一行命令更改root密码？

    哪个能用就用哪个吧! 方法一, echo -e "newpwd\nnewpwd" | (passwd root) 方法二, echo "newpwd" | pa ...

  7. anr以及nlp语音自动化测试方案

    进行asr自动化测试 1.将人工语音录制的音频文件分为一句话一个文件,并将文件名命名为此句话,可以加后缀,例如:附近的公园_1 2.使用电脑连接蓝牙音箱,控制好距离角度等环境 3.使用python或者 ...

  8. 手动设计神经网络进行MNIST分类

    前言: 用手工设计的两层神经网络,经过200个epoch,最后得到0.9599,约0.96的精度 正文 import tensorflow as tf from tensorflow.examples ...

  9. 梳理检测论文-Refinement Neural Network

    Single-Shot Refinement Neural Network for Object Detection 目录 1. motivation 2. RefineDet 解析(Network ...

  10. k8s/02中文文档学习笔记

    k8s中文文档 一.k8s概述 Kubernetes:是一个开源的,用于管理云平台中多个主机上的容器化的应用 k8s设计目标:让部署容器化的应用简单并且高效 大规模容器集群管理工具,从Borg到Kub ...