webpack打包后直接访问页面图片路径错误的解决方法

前言

本文说的这种图片路径错误是这样的，运行webpack-dev-server，一切正常，没有错误。当webpack之后，直接打开index页面，报错，图片找不到，找不到的原因是路径错误。

先看我的项目代码

webpack.config.js

var Webpack = require("webpack");
var path = require("path");

module.exports = {
 entry: './js/entry.js',
 output: {
 path: path.join(__dirname, '/build'),
 filename: 'bundle.js',
 publicPath: "/src/"
 },
 module: {
 loaders: [{
  test: /\.css$/,
  loader: 'style-loader!css-loader'
  }, {
  test: /\.(png|jpg)$/,
  loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
  },
  {
  test: require.resolve('zepto'),
  loader: 'exports-loader?window.Zepto!script-loader'
  }
 ]
 },
 watch: true,
 devtool: "cheap-module-eval-source-map"
}

这里设置了publicPath,用法点击这里

index.html中引用路径如下：

<script type="text/javascript" src="src/bundle.js" ></script>

当运行webapck-dev-server时，http://localhost:8080/显示正常。

紧接着，要打包，目的是脱离命令能直接访问页面。

操作如下：

　　1.执行webpack

　　2.将build中的文件全部拷贝到src中

　　3.查看页面

因为图片路径错误，所以找不到图片。

我通过单独给处理图片的loader设置publicPath解决了这个问题，如下：

　　　{
  test: /\.(png|jpg)$/,
  loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',
  options:{
   publicPath:'/'
  }
  }

然后测试，webapck-dev-server成功，wepback成功，打开页面访问，成功。

路径是这个样子的。

总结

以上就是这文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Webpack打包慢问题的完美解决方法

    Webpack打包慢问题的完美解决方法

    前言 这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具.但是开发过程中遇到一个很棘手的问题就是,React 加上 React-Router.superagent.eventproxy 这些第三方轮子一共有好几百个 module,Webpack 的打包速度极慢.这对于开发是非常不好的体验,同时效率也极低. 问题分析 我们先来看一下完全没有任何优化的时候,Webpack 的打包速度(使用了jsx和babel的loader). 下面是我们

  • Webpack实现按需打包Lodash的几种方法详解

    前言 在数据操作时,Lodash 就是我的弹药库,不管遇到多复杂的数据结构都能用一些函数轻松拆解. ES6 中也新增了诸多新的对象函数,一些简单的项目中 ES6 就足够使用了,但还是会有例外的情况引用了少数的 Lodash 函数.一个完整的 Lodash 库,即使是压缩后,现最新版本也有 71k 的体积.不能为了吃一口饭而买下一个饭店啊. 针对这个问题,其实已经有很多可选方案了. 函数模块 Lodash 中的每个函数在 NPM 都有一个单独的发布模块.NPM: results for 'loda

  • webpack独立打包和缓存处理详解

    webpack独立打包和缓存处理详解

    前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpack拆分.打包.压缩的使用方法.本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方法. 上篇文章中写了一份webpack最基本的配置文件来打包压缩我们的代码: var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js'

  • 解决webpack -p压缩打包react报语法错误的方法

    解决webpack -p压缩打包react报语法错误的方法

    前言 最近在用webpack打包react代码的时候发现一个问题,做一个处理总结分享出来给大家,下面来一起看看详细的介绍: 我的webpack配置: var webpack = require('webpack'); //打包less插件 var ExtractTextPlugin = require('extract-text-webpack-plugin'); //这里的'./css/bundle.css'设置打包地址 var ExtractLess = new ExtractTextPlu

  • webpack打包后直接访问页面图片路径错误的解决方法

    webpack打包后直接访问页面图片路径错误的解决方法

    前言 本文说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 webpack.config.js var Webpack = require("webpack"); var path = require("path"); module.exports = { entry: './js/entry.js', output:

  • vue-cli中打包图片路径错误的解决方法

    vue-cli中打包图片路径错误的解决方法

    最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来.将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下 1.我们首先来说部署到根目录下 就是比如:www.****.com 找到项目中config文件夹下的index.js文件 将文件中的assetsPublicPath: '/',改成如下方框这样. 这样的目的是将绝对路径改成相对路径 如果放在根目录下,这样就可以了 2.放在子目录下 如

  • 解决vue-cli webpack打包后加载资源的路径问题

    vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: config/index.js文件的build->assetsPublicPath的默认值改为 './' assetsPublicPath:资源的根目录.这个是通过http服务器运行的url路径.因为webapp和static中间还有层dist,所以要用'./' 2.另一个就是单纯的在背景图使用相对路径导致加

  • asp.net程序在调式和发布之间图片路径问题的解决方法

    服务器控件显示图片问题不大,会自动显示相对位置, 非服务器控件有两种方法解决: 1. Request.ApplicationPath + 图片路径(images/xxx.gif) : 数据库里 图片路径以文件夹名开头 2. ResolveClientUrl("(~/images/xxx.gif") : 数据库里 图片路径为(~/开头) 注意: ResolveClientUrl 返回相对于当前页面下文件的地址 ResolveUrl 则返回页面所在应用程序下的相对地址

  • django DRF图片路径问题的解决方法

    django DRF图片路径问题的解决方法

    前言 其实就是Django RESTful Framework,RESTful一种API的命名风格,主要因为前后端分离开发出现,前后端分离: 用户访问静态文件的服务器,数据全部由ajax请求给到,RESTful风格:数据应该是名词,而动词由HTTP的请求方式来体现,RESTful风格的API给前端返回 结果对象,无论什么请求方式 本文主要介绍了关于django DRF图片路径问题,下面话不多说了,来一起看看详细的介绍吧 问题描述: 为什么DRF中有时候返回的json中图片是带域名的,有时候是不带

  • php命令行（cli）模式下报require 加载路径错误的解决方法

    今天,同事突然告诉我,我写的一个做计划任务的php脚本执行总是不成功. 脚本本身很简单,里面只有包含了几个库文件并执行了一个函数,函数应该没有错误,这个函数在别处也调用过,没有问题.我在本地用浏览器访问页面,执行成功,看来没有问题,我有点怀疑是同事的计划任务的问题.我又打开命令行,用php直接执行脚本,这回报错了,是require 包含文件错误,看来是路径不对. 不明白是什么原因引起的,只是从报错来看是路径不对,我猜测是跟相对路径有关,于是把相对路径的全部改成绝对路径,再执行,问题解决. 在百度

  • 访问编码后的中文URL返回404错误的解决方法

    访问编码后的中文URL返回404错误的解决方法

    昨天做一个项目,其中有一个需求是每一张图片对应一小段文字对图片的说明,普通的做法是新建一个表然后把图片名与说明文字都记录到数据库内.仔细考虑后感觉这个应用不要数据库也能完成,我实现的方案是把说明文字URLENCODE后当做文件名,这样当我读取文件的时候再把文件名URLDECODE就可以后驱图片的文字说明了. 可是通过浏览器访问图片时却提示找不到文件,如有一张图片的说明文字为"琼台博客",URLENCODE后生成的文件名如下 复制代码 代码如下: %E7%90%BC%E5%8F%B0%E

  • asp.net程序编译调试时偶尔出现访问被拒绝的错误的解决方法

    问题描述: 编写asp.net程序,当编译调试比较频繁的时候,很容易经常地出现访问被拒绝.形如: 分析器错误信息: 访问被拒绝:"Microsoft.Web.UI.WebControls".源错误: 行 197: <add assembly="System.Web.Mobile, Version=1.0.5000.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/>行 198: <add as

  • navicatdesignquery.sql.bak系统找不到指定路径错误的解决方法

    navicatdesignquery.sql.bak系统找不到指定路径错误的解决方法

    今天使用Navicat ,其他功能都正常,但是新建查询的时候,出现一个很奇葩的问题 C:\Program Files (x86)\PremiumSoft\Navicat for MySQL8.1/_NAVICAT_DESIGNQUERY.sql.bak  系统找不到指定路径 找了半天找不到解决办法,下载navicat 11都没用, 更改版本也没用. 最后发现,navicat 的每个连接,有个连接属性 具体操作: 在连接---属性---高级.修改一下路径,改成你现在安装的navicat目录就好了

  • webpack配置打包后图片路径出错的解决

    webpack配置打包后图片路径出错的解决

    问题 项目在开发环境下工作正常,当打包后图片不见了,检查元素后发现路径出错了. 图片路径是这样:background: url(/static/img/bg_camera_tip.bd37151.png),但该路径下文件并不存在. 打包后文件目录如下: 可以看到背景图片的路径应该是../../static而实际却是/static,找到原因后就好解决了 方法一 查看build目录下webpack.base.conf.js的配置,图片文件会经过url-loader处理. module: { rule

随机推荐