解决vue打包之后静态资源图片失效的问题
作者：jmin_coming 发布时间：2024-05-29 22:18:53
1、问题描述
在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！
2、解决方法之一
静态资源static存放位置放在src目录下
你可能会问为什么放在src目录下？放在跟src同级目录下不可以吗？好吧，一开始我也是放在src同级目录下，但是在某个css文件中引入背景图片的时候打包之后图片失效，我是这样引入的
实践证明这个写法是错误的，这个会在你打包的时候直接抱一大堆错（如css-loader错误），连项目都跑不起来。
于是我用下面的写法：
这种写法也是不可以的，原因是你的静态资源文件static不在src目录，而在vue中src目录是相对根目录是src目录，所以如果你想用上面的写法，必须要把static放在src目录下。如上面图一图二
注意：不能把static/images/user.png写成 /static/images/user.png，否则图片还是失效。
以上是关于文件存放位置以及css中引入图片问题，如果是通过img标签引入图片的话，相对简单，直接写绝对地址就行了，并且静态资源static文件夹的位置可以在src里面，也可以放在与src同级下，但是为了不出现上面情况，放在src里面即可！
img引入图片：
以上是一种解决图片失效问题的方法，当然，如果非要把static静态资源目录放在与src同级目录下，也是有解决方法，例如通过导入图片的方式（本人未实践），可以自行尝试！
这篇解决vue打包之后静态资源图片失效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
来源：http://blog.csdn.net/jian_xi/article/details/70158952
0
投稿猜你喜欢
- 本文实例讲述了php+js实现的无刷新下载文件功能。分享给大家供大家参考，具体如下：服务器端页面步骤就是，设置头文件参数，然后读入并输出文件
- 在python中安装非自带python模块，有三种方式:1.easy_install2.pip3.下载压缩包(.zip, .tar, .ta
做网页时（其实是网页木马呵呵），最让人烦恼的是自己辛辛苦苦写出来的客户端IE运行的javascript代码常常被别人轻易的拷贝，实在让自己的- Sometimes we have need to interact with an application,for examp
- 目录Uiautomator2的安装和使用具体实现如何打开支付宝并进入蚂蚁森林？收能量如何停止完整代码结语@[toc] 虽然我支付宝加了好多好
- 闭包基本介绍闭包就是 一个函数 和其相关的 引用环境 组合的一个整体好处： 保存引用的变量
- return 语句就是讲结果返回到调用的地方，并把程序的控制权一起返回程序运行到所遇到的第一个return即返回（退出def块），不会再运行
- 在程序中，变量就是一个名称，让我们更加方便记忆。cars = 100 space_in_a_car = 4.0 drivers = 30 p
- 首先我是用pycharm完成的，要确定命令行和界面里是同一个环境。如果不确定可以设置再add在新增加的环境里看现在是哪个环境，只要选择已有的
- 今天给大家介绍一个电商中常见的场景 —— MySQL 数据同步 Elasticsearch。商品检索
- 1.语法及用法（1）语法：str.endswith(suffix[,start][,end])str：字符串，待判断字符串suffix：后缀
- 本文实例为大家分享了python实现五子棋小游戏的具体代码，供大家参考，具体内容如下暑假学了十几天python，然后用pygame模块写了一
- 目前，语音识别，即将语音内容转换为文字的技术已经比较成熟，遥想当时锤子发布会上展示的讯飞输入法语音识别，着实让讯飞火了一把。由于此类语音识别
- PyTorch加载模型model.load_state_dict()问题希望将训练好的模型加载到新的网络上。如上面题目所描述的，PyTorc
- 准备工作安装anaconda，官网下载安装，笔者安装在"D:\Anaconda3"安装好之后，查看环境变量path中是否
- run() 方法并不启动一个新线程，就是在主线程中调用了一个普通函数而已。start() 方法是启动一个子线程，线程名就是自己定义的name
- template 概述最近在做脚手架相关的内容, 研究了一下 Go 的 text/template 包, 接下来跟大家分享下 templat
- 1 停机方案发布公告停止服务离线数据迁移（拆分，重新分配数据）数据校验更改配置恢复服务回滚预案2 停写方案支持读写分离升级公告中断写操作，隔
- 目录前言数据结构常规实现string转[]byte[]byte转string高效实现性能测试总结前言当我们使用go进行数据序列化或反序列化操
- 一、filter（）在Python内建函数中，有一个和map（）函数用法类似、却可以用来过滤元素的迭代函数，这个函数就是filter()。它
