关于webpack打包图片的路径问题

最新推荐文章于 2024-05-01 01:33:14 发布
最新推荐文章于 2024-05-01 01:33:14 发布
阅读量231 收藏
点赞数
文章标签： webpack ViewUI
原文链接：http://www.cnblogs.com/lhyforfront/p/6410164.html
版权

在webpack打包的时候，用css-loader的时候，在css文件里用的引用的背景的图片的时候，如果是url()...那么里面的路径不能用相对路径，得用绝对路径，而且必须是带http的，幸好，，，我用的是webstorm开发。。。。。

 

好啦，希望共同进步，成为优秀的weber

转载于:https://www.cnblogs.com/lhyforfront/p/6410164.html

weixin_30697239
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack打包后直接访问页面图片路径错误的解决方法
12-02
前言 本文说的这种图片路径错误是这样的，运行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.
webpack配置打包后图片路径出错的解决
08-27
在使用Webpack进行项目打包时，常见的一个问题是图片路径出错的问题。这个问题的出现是因为Webpack在打包时会对图片进行处理，导致图片的路径出错。本文将介绍两种解决该问题的方法。 问题描述 在开发环境下，项目...
vue和webpack打包项目相对路径修改的方法
08-27
主要介绍了vue和webpack打包项目相对路径修改的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack 踩坑之对于打包的图片路径错误
qq_33745501的博客
05-10 4510
一、什么是webpack？    webpack是模块打包工具二、webpack安装        版本：4.6.0npm install webpack --save-dev npm install webpack-cli --save-dev三、配置文件webpack.config.jspubliPath的默认地址为当前目录。module.exports = { entry:{ ...
【Webpack5笔记】处理打包各种资源（css资源、less资源、图片资源
最新发布
2401_84418883的博客
05-01 1067
想要webpack打包资源，需要在主文件中引入css文件在webpack.config.js中，因为使用了style-loader，也需要安装const path=require(“path”) //nodejs核心模块//入口entry:“./src/main.js”, //相对路径//输出output:{//文件的输出路径//__dirname nodejs的变量，代表当前文件的文件夹目录。
webpack 图片打包路径问题DIY解决方案
yanhappiness
10-19 1582
为什么要DIY？因为我也不知道官方怎么解决的啊！ 如果你能告诉我的话，真的是帮大忙了！ 问题描述 开发环境上的图片地址是放在根目录下面的，不用管，但是生产环境的地址引用一直不对！图片路径报错… 先来看配置文件 生成目录 这种形式：打包路径是对的，但是引用路径是根据publicPath来决定的。 生成的图片路径所有的都是 ./images/[hash].[name].[ext] 问...
webpack踩坑之路 (2)——图片的路径与打包
m0_37477061的博客
07-04 109
https://www.cnblogs.com/ghost-xyx/p/5812902.html
解决vue+webpack打包路径的问题
08-27
然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解问题的核心在于Vue Router的history模式。在history模式下...
浅谈webpack打包过程中因为图片的路径导致的问题
08-28
浅谈webpack打包过程中因为图片的路径导致的问题 在本文中，我们将讨论webpack打包过程中因为图片的路径导致的问题，并提供相应的解决方案。 1. 问题背景 在使用webpack打包时，我们可能会遇到图片路径的问题。...
完美解决webpack打包css背景图片路径问题
11-20
本文将详细解析如何解决Webpack打包CSS背景图片路径问题。 首先，让我们分析问题所在。在Vue组件的样式部分，我们可能会写入如下的CSS代码： ```css background-image: url("../assets/img/icon_add.png"); ``` 在...
webpack踩坑之路图片的路径与打包
08-29
在 Webpack 中，图片的路径与打包是一个常见的问题，尤其是在初学者刚开始使用 Webpack 时。图片的引用方式有多种，包括 HTML 文件中的 img 标签、CSS 文件中的背景图设置、JavaScript 文件中的动态添加或改变图片...
webpack对图片路径的处理
qq_38796823的博客
04-18 4187
前言 原本我们写在网页中的代码，其中对图片资源路径的引入，在打包后文件位置会发生变化，这时图片路径也会发生变化。 这时我们需要解决这个问题：不管位置怎么变，图片路径一定是正确的！ 图片大致分为如下几种情况： css中的图片问题 网页标签img中的图片（分为静态的和绑定的） 一、css中的图片问题 安装相应的图片解析模块【解析与压缩】 yarn add url-loader file-loa...
Webpack打包图片（asset module type）；Webpack打包JS（babel）；Webpack打包vue代码；resolve模块解析（extensions和alias）
qq_54075517的博客
08-03 201
Webpack打包图片（asset module type）；Webpack打包JS（babel）；Webpack打包vue代码；resolve模块解析（extensions和alias））
webpack打包图片资源问题
CodAlun的博客
04-21 720
在实际应用中有以下几种图片的引用方式： HTML文件中img标签的src属性引用或者内嵌样式引用 <img src="photo.jpg" /> <div style="background:url(photo.jpg)"></div> CSS文件中的背景图等设置 .photo { background: url(photo.jpg); } JavaScript文件中动态添加或者改变的图片引用 var imgTempl = '<img src
vue webpack打包后图片、js、css路径错误的完美解决方法
weixin_56242672的博客
07-27 4594
项目用rundevbuild打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。
webpack5.9.0自定义图片名称并打包到指定文件路径下
qq_43340547的博客
09-04 1375
我们知道，webpack5打包图片时会自动帮我们生成很长的名字，并且会默认打包到某路径，当我们想自定义图片名称，并且打包到指定文件路径下时该怎么做呢？ 【例如：我们要将图片bg.jpeg以格式bg.【8位数的hash，以免图片名称冲突】.jpeg，打包到dist目录下的img文件中时，该怎么做呢？】 我们可以在webpack.config.js文件中添加如下代码： module: { rules: [ { test: /\.(jpg|png|gif|jpeg)$/i,
webpack打包js文件，图片路径错误，没有将图片打包的问题
pon的博客
04-22 2898
初用 webpack 进行项目开发的同学会发现：在 js 或者 vue 中引用的图片都没有打包进 bundle 文件夹中。这时是需要require的方式进行图片路径的引用，这样引用的图片就可以成功打包进 bundle 文件夹里了。 举例： 错误的图片路径写法： 正确的图片路径写法： 再进行webpack打包时，你就会发现你所需要的图片都被打包进来了！ ......
webpack打包图片路径问题
weixin_34419326的博客
09-04 779
那些年，我用webpack踩过的坑 webpack打包图片文件路径问题 output.publicPath 将publicPath在浏览器中引用时指定输出文件的公共URL地址。 处理静态资源引用地址用的 。 打包后默认情况是url(文件名) 这样必须确保资源文件和css处于同一目录，但我们显然不希望这样，希望修改打包引用地址。 {te...
webpack打包vue项目后，一些文件图片路径找不到的问题解决办法
王永存
09-23 9162
最近写了一个百度地图的项目，要求底部有一个导航栏。具体如下图： 首先，拿到了底部导航栏的所有图标图片，图片都有两种。灰色的代表未选中，选中的用带样色的图片替换。 先看一下，组件中 html结构：通过vue提供的v-for方法，进行遍历显示footNav这个数组。数组里边存放着{title:"银行"，url:" "，url1:" "}，将图片的 src与isSel
webpack 打包css背景图片路径处理
05-16
为了解决Webpack打包CSS背景图片路径引用问题，我们可以采取以下几种方式： 1. 直接使用相对路径 我们可以使用相对路径来引用背景图片。比如，如果我们的 CSS 文件和图片文件在同一个目录下，那么可以直接使用相对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值