解决vue打包之后静态资源图片失效的问题

作者:jmin_coming 时间:2024-05-29 22:18:53 

1、问题描述

在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到(404错误),这些图片可以是以src引入的图片, 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入的路径直接相关,下面是我的其中一个项目的文件存放以及路径书写方式!

2、解决方法之一

静态资源static存放位置放在src目录下

解决vue打包之后静态资源图片失效的问题 

解决vue打包之后静态资源图片失效的问题

你可能会问为什么放在src目录下?放在跟src同级目录下不可以吗?好吧,一开始我也是放在src同级目录下,但是在某个css文件中引入背景图片的时候打包之后图片失效,我是这样引入的

解决vue打包之后静态资源图片失效的问题 

实践证明这个写法是错误的,这个会在你打包的时候直接抱一大堆错(如css-loader错误),连项目都跑不起来。

于是我用下面的写法:

解决vue打包之后静态资源图片失效的问题 

这种写法也是不可以的,原因是你的静态资源文件static不在src目录,而在vue中src目录是相对根目录是src目录,所以如果你想用上面的写法,必须要把static放在src目录下。如上面图一图二

注意:不能把static/images/user.png写成 /static/images/user.png,否则图片还是失效。

以上是关于文件存放位置以及css中引入图片问题,如果是通过img标签引入图片的话,相对简单,直接写绝对地址就行了,并且静态资源static文件夹的位置可以在src里面,也可以放在与src同级下,但是为了不出现上面情况,放在src里面即可!

img引入图片:

解决vue打包之后静态资源图片失效的问题 

以上是一种解决图片失效问题的方法,当然,如果非要把static静态资源目录放在与src同级目录下,也是有解决方法,例如通过导入图片的方式(本人未实践),可以自行尝试!

这篇解决vue打包之后静态资源图片失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

来源:http://blog.csdn.net/jian_xi/article/details/70158952

标签:vue,打包,静态资源,图片,失效
0
投稿

猜你喜欢

  • 给JavaScript自定义一个Trim函数

    2008-04-20 16:30:00
  • pytorch实现从本地加载 .pth 格式模型

    2021-07-01 18:32:03
  • Pyinstaller打包Scrapy项目的实现步骤

    2022-05-01 18:07:02
  • MySQL Index Condition Pushdown(ICP)性能优化方法实例

    2024-01-19 20:08:25
  • Python实现模拟时钟代码推荐

    2023-08-03 05:26:09
  • 基于mysq字段选择的详解

    2024-01-23 20:11:20
  • 详解前端自动化工具gulp自动添加版本号

    2023-08-09 14:48:41
  • Pycharm小白级简单使用教程

    2022-05-12 23:26:32
  • GO语言make()分配用法实例

    2024-01-30 00:54:14
  • JS设置cookie、读取cookie、删除cookie

    2023-08-27 19:35:17
  • 对mysql表进行优化、分析、检查和修复的说明

    2010-04-22 16:28:00
  • FCKEDITOR 的高级功能和常见问题的解决方法

    2023-12-16 16:07:13
  • CentOS 6.4安装配置LAMP服务器(Apache+PHP5+MySQL)

    2023-11-21 21:42:33
  • Python 模拟员工信息数据库操作的实例

    2024-01-20 03:42:04
  • python实现与redis交互操作详解

    2022-07-07 17:37:18
  • JS重现80后儿时经典拼板(模板)游戏

    2011-09-11 18:36:46
  • JavaScript使用正则表达式获取全部分组内容的方法示例

    2023-08-27 13:38:18
  • 教你快速掌握怎样在Windows下升级MySQL

    2008-12-31 17:08:00
  • GoLand编译带有构建标签的程序思路详解

    2024-02-18 02:13:52
  • MySQL中BIGINT数据类型如何存储整数值

    2024-01-23 21:15:45
  • asp之家 网络编程 m.aspxhome.com