首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Webpack 4在不同层次的文件夹结构中为img标签生成错误的src路径

Webpack是一个现代化的前端构建工具,用于将多个模块打包成一个或多个静态资源文件。它提供了强大的模块化能力和丰富的插件系统,可以帮助开发者更高效地构建和管理前端项目。

对于Webpack 4在不同层次的文件夹结构中为img标签生成错误的src路径的问题,可能是由于配置问题或文件路径引用错误导致的。下面是一些可能的原因和解决方法:

  1. 配置问题:检查Webpack配置文件中的相关配置项,特别是关于图片资源的配置。确保正确设置了输出路径、公共路径和图片加载器等。
  2. 文件路径引用错误:检查HTML文件或CSS文件中img标签的src属性是否正确引用了图片文件的路径。确保路径是相对于HTML或CSS文件的位置。
  3. 文件夹结构问题:如果文件夹结构发生了变化,可能需要相应地调整Webpack配置文件中的路径配置。确保路径配置与实际文件夹结构一致。
  4. 图片加载器配置问题:如果使用了图片加载器(如url-loader或file-loader),确保正确配置了图片加载器的参数,如限制文件大小、输出文件名等。

总结起来,解决Webpack 4在不同层次的文件夹结构中为img标签生成错误的src路径的问题,需要仔细检查Webpack配置文件和文件路径引用,确保配置正确并且路径引用准确。如果问题仍然存在,可以尝试使用Webpack的调试工具或查阅相关文档进行进一步的排查和解决。

腾讯云相关产品推荐:

  • 云开发(CloudBase):提供全栈云开发能力,包括云函数、云数据库、云存储等,可快速搭建和部署前后端应用。详细介绍请参考:腾讯云开发产品介绍
  • 云服务器(CVM):提供弹性计算能力,可快速创建和管理虚拟机实例,适用于各种应用场景。详细介绍请参考:腾讯云服务器产品介绍
  • 对象存储(COS):提供安全可靠的云端存储服务,适用于存储和管理各种类型的文件和数据。详细介绍请参考:腾讯云对象存储产品介绍
  • 人工智能(AI):提供丰富的人工智能服务和工具,包括图像识别、语音识别、自然语言处理等,可用于开发智能应用。详细介绍请参考:腾讯云人工智能产品介绍
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue处理静态资源及publicstaticassets目录区别

编译过程,所有诸如 、background: url(...) 和 CSS @import 资源 URL 都会被解析一个模块依赖。 例如,url(....(仅作用于模版) public 文件夹 任何放置 public 文件夹静态资源都会被简单复制,而不经过 webpack 。需要通过绝对路径来引用。...2、文件丢失会直接在编译时报错,而不是到了用户端才产生 404 错误。 3、最终生成文件名包含了内容哈希,因此你不必担心浏览器会缓存它们老版本。...比较“聪明”是,如果在不同目录下放置相同文件,会被统一处理一个文件,放置 img 目录中进行引用,大大节省了资源。... 发现还是会被 webpack 编译。 但是如果放置 public 目录进行引用,就不同了。

92520

Vue处理静态资源及publicstaticassets目录区别

编译过程,所有诸如 、background: url(...) 和 CSS @import 资源 URL 都会被解析一个模块依赖。 例如,url(....(仅作用于模版) public 文件夹 任何放置 public 文件夹静态资源都会被简单复制,而不经过 webpack 。需要通过绝对路径来引用。...2、文件丢失会直接在编译时报错,而不是到了用户端才产生 404 错误。 3、最终生成文件名包含了内容哈希,因此你不必担心浏览器会缓存它们老版本。...比较“聪明”是,如果在不同目录下放置相同文件,会被统一处理一个文件,放置 img 目录中进行引用,大大节省了资源。... 发现还是会被 webpack 编译。 但是如果放置 public 目录进行引用,就不同了。

26.7K82

Vue学习-Webpack

webpack 通常会指定版本号 前期准备 项目目录结构(如下图): dist文件夹:用于存放打包文件 src文件夹:用于存放编写源文件 main.js:项目的入口文件 mathUtils.js:...配置 实际项目中一般不会直接用到webpack命令,这样会直接找全局webpack,然而不同项目可能会用到不同版本,因此使用时候一般会在项目中下载一个本地webpack(版本号与项目中一致...前期准备: 如上图,src文件夹下分别创建css和img文件夹,其中css文件夹创建一个名为normal.css文件,里面是对图片引用。...(项目根目录),但是打包后图片在输出文件夹dist,自然无法找到,因此需要设置访问图片图片路径。...首先在index.html文件中新建一个idapp标签,作为Vue实例 然后src路径下新建一个名为vue文件夹,用于存放vue文件 在其中新建一个名为

1.3K10

Web前端开发高级前端技术(高级开发程序篇)

前端命名规范,前端结构组织,文件命名规范,一个项目中代码组织结构要清晰易懂,同类型文件可以归类到到相同文件夹,文件命名规则需要统一且命名要有意义。...优化前端效果,可以删除多余容器元素,让代码层次少,避免使用table进行页面的布局,换成用div+css样式布局。 css代码优化,各个浏览器,相同元素解析结果不同,就需要手动重置一些样式。...图片可以通过webpack压缩优化。 新建src文件夹,该文件夹存放开发用文件,src目录下创建文件。 ​ ? 新建dist文件夹 该文件存放打包后文件,可以先不创建,打包时可以自动创建。 ​.../src/index.js output出口配置是指生成文件输出到哪个地方去,./dist/main.js path,输出路径,filename,输出文件名 ​ ?...对于大于limit byte图片用file-loader进行解析 file-loader解析项目中url引入(包括imgsrc和backgroundurl)修改打包后文件引用路径

2.3K10

手摸手 Webpack 多入口配置实践

[ext]' ,那么最终打包出来文件图片引用路径 output.publicPath + 'img/[name].[ext]' = '/dist/img/[name].[ext]'。...开始配置 3.1 文件结构改动 src 目录下将 main.js 和 App.vue 两个文件各复制一下,作为不同入口,文件结构变为: . ├── build │ ├── build.js │...但是如果不同 HTML 文件下不同 vue-router、vuex 都放到 src 目录下,多个入口内容平铺在一起,项目目录会变得凌乱不清晰,因此在下将多入口相关文件放到一个单独文件夹,以后如果有多入口内容...下面我们进行文件结构改造: 首先我们根目录创建一个 entries 文件夹,把不同入口 router、store、main.js 都放这里,每个入口相关单独放在一个文件夹 src 目录下建立一个...配置 然后我们 build/utils 文件中加两个函数,分别用来生成 webpack entry 配置和 HtmlWebpackPlugin 插件配置,由于要使用 node.js 来读取文件夹结构

77620

一文搞懂 Webpack 多入口配置

[ext]' ,那么最终打包出来文件图片引用路径 output.publicPath+'img/[name].[ext]'='/dist/img/[name].[ext]'。...开始配置 3.1 文件结构改动 src 目录下将 main.js 和 App.vue 两个文件各复制一下,作为不同入口,文件结构变为: . ├── build │ ├── build.js │...但是如果不同 HTML 文件下不同 vue-router、 vuex 都放到 src 目录下,多个入口内容平铺在一起,项目目录会变得凌乱不清晰,因此在下将多入口相关文件放到一个单独文件夹,以后如果有多入口内容...下面我们进行文件结构改造: 首先我们根目录创建一个 entries 文件夹,把不同入口 router、 store、 main.js 都放这里,每个入口相关单独放在一个文件夹 src 目录下建立一个...配置 然后我们 build/utils 文件中加两个函数,分别用来生成 webpack entry 配置和 HtmlWebpackPlugin 插件配置,由于要使用 node.js 来读取文件夹结构

2.8K40

一文搞懂 Webpack 多入口配置

[ext]' ,那么最终打包出来文件图片引用路径 output.publicPath+'img/[name].[ext]'='/dist/img/[name].[ext]'。...开始配置 3.1 文件结构改动 src 目录下将 main.js 和 App.vue 两个文件各复制一下,作为不同入口,文件结构变为: . ├── build │ ├── build.js │...但是如果不同 HTML 文件下不同 vue-router、 vuex 都放到 src 目录下,多个入口内容平铺在一起,项目目录会变得凌乱不清晰,因此在下将多入口相关文件放到一个单独文件夹,以后如果有多入口内容...下面我们进行文件结构改造: 首先我们根目录创建一个 entries 文件夹,把不同入口 router、 store、 main.js 都放这里,每个入口相关单独放在一个文件夹 src 目录下建立一个...配置 然后我们 build/utils 文件中加两个函数,分别用来生成 webpack entry 配置和 HtmlWebpackPlugin 插件配置,由于要使用 node.js 来读取文件夹结构

64020

【Hybrid开发高级系列】WebPack模块化专题

HTML文件img标签src属性引用或者内嵌样式引用     ...2.7.3 JS图片         初用webpack进行项目开发同学会发现:js或者react引用图片都没有打包进bundle文件夹。         ...但是如果把名字取apps/question/index这样,则会生成对应目录结构。我是比较喜欢构建后目录也有清晰结构,可能是习惯gulp后遗症吧。这样也便于我们在前端路由中进行统一操作。...踩坑之路(2)——图片路径与打包 http://www.cnblogs.com/ghost-xyx/p/5812902.html (Good)webpack处理htmlimgsrc引入图片 http...坑 http://www.cnblogs.com/wonyun/p/5950722.html vue.js+webpackimg src赋值路径问题?

33550

Vue CLI 2.x搭建vue,目录最全分析

assertsPath 生成静态资源路径(判断开发环境和生产环境,config文件index.js文件定义assetsSubDirectory) * @param {String}...: config文件夹结构: ?...时根据package.json配置生成npm安装包文件夹 4src文件夹: 我们需要在src文件夹开发代码,打包时webpack会根据build规则(build规则依赖于config配置...)将src打包压缩到dist文件夹在浏览器运行 (1)assets文件:用于存放静态资源(css、image),assets打包时路径会经过webpackfile-loader编译(因此,assets...需要使用绝对路径)成js (2)components文件夹:用来存放 .vue 组件(实现复用等功能,如:过滤器,列表项等) (3)router文件夹router/index.js文件配置页面路由

1.2K20

如何在webpack设置favicon--webpack入门教程(四)

本文主要想介绍前端webpack打包,与favicon图标相关配置。包括html-webpack-plugin设置favicon,和自定义favicon打包路径两个方面。...webpack入门教程(一) 0,需求 favicon(收藏夹图标)是一个网站必备,浏览器地址栏、收藏夹中都可以看到favicon,通过favicon可以快速区分不同网站。...1.2 html-webpack-plugin设置favicon html-webpack-plugin设置favicon属性,属性值是favicon所在路径。 favicon: '..../images/favicon.ico',//favicon路径 添加该属性后,就会根据webpack.config.js设置outputpath路径,在生成html文件中生成一个link标签:...默认配置参数是atttrs=’img:src’,处理图片src引用资源,这里需要增加配置:'link:href',即可处理link标签href引用资源: 需要先安装html-loader、file-loader

9.3K451

webpack使用优化(react篇)

这篇文章我们就来聊聊如何在Webpack构建过程如何针对React应用做一些优化。...src目录下一级文件,除了page文件夹是react主体逻辑文件之外,其它img, js, css, libs,都属于各个页面都会用到公共文件,如utils, 上报等。...如果无法使用服务器构建,开发时请让小伙伴统一开发路径 webpackbug导致如果本地开发目录路径不一致,编译出来md5会不一致。所以推荐使用服务器构建。...但面对React项目,我们每一个component都有自己对应index.js(处理逻辑)和index.scss(处理样式),由于这个合图插件只能标出一个图片路径,因此如果合图引用发生在不同层次...(cb) { var spriteData = gulp.src(Config.filePath.src + 'img/sprites/**/*.png')

1.5K60

vue-cli 脚手架 webpack 配置基础文件详解

"css-loader": "^0.28.0",//webpack先用css-loader加载器去解析后缀css文件,再使用style-loader生成一个内容最终解析完css代码style...标签,放到head标签里 "extract-text-webpack-plugin": "^3.0.0",//将一个以上包里面的文本提取到单独文件 "file-loader": "^1.1.4...,webpack旧版本可以直接在webpack.config.js配置,现版本postcss文档示例独立出.postcssrc.js,里面写进去需要使用到插件。.../src/main.js' }, //配置出口,默认是/dist作为目标文件夹路径 output: { path: config.build.assetsRoot,//路径 filename...(), // 显示文件正确名字 new webpack.NoEmitOnErrorsPlugin(),//当webpack编译错误时候,来端打包进程,防止错误代码打包到文件 // https

1.3K31

vue-cli静态资源处理

vue-cli是利用webpack进行打包部署,其中静态资源路径问题是一个比较麻烦部分。 ?   项目中共有两个存放静态文件地方。.../static 根目录下static文件夹 assets src目录下资源文件夹   /static 目录不会被webpack处理,build后复制到disk目录下,所以.vue中使用/static绝对目录引用不会被...组件中使用assets静态文件,通常有两种形式引用:     1.img标签引用  <img src='..../assets/logo.png');   webpack处理.vue时会搜索这两类引用,处理方式稍有不同。   ...首先判断是否是绝对路径开头,如果是两种都不作处理,如果相对路径先搜索该路径是否能在src中找到,如找到并且文件较小将被转为base64格式,如较大将重命名文件并将文件复制到static/img目录下(

1.7K10

Day01_webpack

, 登录后, 生成css文件和字体文件 下载css文件和字体文件, 也可以使用在线地址 自己页面引入iconfont.css, 并在想显示字体图标的标签上使用类名即可 箭头函数非常熟练 const.../assets/logo_small.png) no-repeat center; } src/main.js - 把大图插入到创建img标签上, 添加body上显示 // 引入图片-使用 import...以上过程Webpack 会在特定时间点广播出特定事件,插件监听到感兴趣事件后会执行特定逻辑,并且插件可以调用 Webpack 提供 API 改变 Webpack 运行结果 4、说一下...(必会) 1、 file-loader:把文件输出到一个文件夹代码通过相对 URL 去引用输出文件 2、 url-loader:和 file-loader 类似,但是能在文件很小情况下以 base64...2) 不同用法 ​ Loadermodule.rules配置,也就是说他作为模块解析规则而存在。

1.6K20

(824) 图片跳坑大战--css图片处理

1.新建images文件夹 src目录下新建一个images文件夹,把需要图片放入images文件夹。...图片下载 2.新增标签 index.html文件增加一个放置div标签(需要注意是这里修改srcindex.html文件,不是dist下),代码如下: 3.编写样式 src目录下css目录下index.css文件编写样式,如下, src/css/index.css: body{ background-color: #018eea...,拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式url路径是相对入口html页面的,而不是相对于原始css文件所在路径。...webpack打包之后,我们并没有看到dist目录下生成相关图片,这是因为被打包到了js(base64),图片被用代码形式放置js。因此大图片不适合打包成base64格式。

81040

搭建webpack项目框架

打包到 build 里,并且webpack和build目录结构一模一样,比如上面实例项目testDemo,它源目录结构webpack/app/testDemo,那打包之后路径就是build/...6、无论你有没有修改文件,只要打包一次,webpack 就会重新运行一遍,并且生成不同文件名,有没有什么办法避免这种情况,至少未修改文件就不会再被打包一遍? 7、如何提取公共模块?...我这里规范以 testDemo 例: ? 项目的目录结构和 testDemo保持一致:html文件最外层,js、css、json、img单独文件夹。...(1)HTML (2)CSS .img-box{ background: url("...../img/1.jpg'); $("body").append(``); 4、配置文件文件分为这4个,其实是为了更好区分环境(本地、测试、线上)以及维护配置代码

2.3K40
领券