Vue项目之背景图片打包后路径错误

最新推荐文章于 2024-01-04 13:46:14 发布

aiguai2216

最新推荐文章于 2024-01-04 13:46:14 发布

阅读量171

点赞数

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/zhaobao1830/p/6963476.html

版权

第一种方法：

原因:

首先，出错点在url-loader上面。

// url-loader配置
// build/webpck.base.conf.js
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  query: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
}

这里解释一下上面这段url-loader配置，test是正则匹配规则，匹配项目中所有的以正则规则结尾的格式的文件，直白点就是所以的图片（png，jpg，jpeg，gif，svg）。然后用url-loader进行处理。处理也有个规则如下，当不大于10000B的文件进行base64转码，就是将图片转为base64的格式。如果超过10KB的图片就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]’) 这个目录下（从build/utils.js和config/index.js可以知道这个路径就是static/img目录，并且图片名是进行hash之后的值，根目录下面没有static目录，所以会创建一个static目录，至于为什么最后没有看见这个目录后续再说）,当我们创建了一个这样的目录之后，所以的图片访问路径就成了对应的static/img/'图片名'。到这里就可以确定，如果小于10KB的图片转为base64，大于10KB的图片已经将图片路径改为了static/img/'图片名'，然后我们继续来理清访问路径的事情。

// 目前我们的目录结构
index.html
static
    |--img
        |--'picname'
    |--css
        |--app.css
    |--js
        |--app.js

我们知道img为html标签，他的路径是由index.html开始访问的，他走static/img/'图片名'是能正确访问到图片的，所以img的路径没问题，然后app.css访问static/img/'图片名'是访问错误的，因为在css目录下并没有static目录。这样就造成了路径访问失败的问题。

我的解决方法是：

把图片放在static下面

这样打包以后正确

第二种方法：

如果是确定了url是哪个，就可以用这个方法

publicPath：是在webpack.config.js文件的output选项中，主要作用就是处理静态文件路径的。

1 output:{
2     path:path.resolve(__dirname,'dist'),
3     filename:'[name].js',
4     publicPath: "http://192.168.0.102:1717/"
5   }

这样打包以后，路径就由相对路径变成绝对路径了

#tupian {
  background-image: url(http://192.168.0.102:1717/images/b3422d7fb5ba566d1cb9e81efb0e9d7e.jpg);
  width: 100px;
  height: 100px;
  -webkit-transform: rotate(7deg);
  transform: rotate(7deg);
}

<link href=http://192.168.0.102:1717/css/index.css?f6342111d1d5bcbaeb6f rel=stylesheet></head>
<body>
   <div id=tLess></div>
   <div><img src=http://192.168.0.102:1717/images/e3c36035f62cb73913b6a45eeb934dc1.jpg></div>
   <div id=tupian></div>
   <div id=title></div>
<script type=text/javascript src=http://192.168.0.102:1717/entry.js?f6342111d1d5bcbaeb6f></script><script type=text/javascript src=http://192.168.0.102:1717/entry2.js?f6342111d1d5bcbaeb6f></script></body>

工作中推荐使用这个方法

第三个方法：

把背景图片放到其他服务器上，直接引用

转载于:https://www.cnblogs.com/zhaobao1830/p/6963476.html

aiguai2216

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue项目之背景图片打包后路径错误

第一种方法：原因:首先，出错点在url-loader上面。// url-loader配置// build/webpck.base.conf.js{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: ut...
复制链接

扫一扫