用url-loader从css/scss中引入图片时图片在页面不显示（控制台404）

最新推荐文章于 2022-11-15 17:26:46 发布

майр

最新推荐文章于 2022-11-15 17:26:46 发布

阅读量809

点赞数

文章标签： css scss webpack

本文链接：https://blog.csdn.net/weixin_47902184/article/details/124706062

版权

在使用webpack配置url-loader引入CSS/SCSS中的图片时遇到问题，导致页面图片404。经过排查发现是由于webpack版本升级至5.72.0导致的问题。在webpack5中，配置方式有所不同。通过查看版本并调整配置，成功解决图片不显示的故障。

摘要由CSDN通过智能技术生成

关于webpack 中 url-loader 引入图片的大坑

首先声明的是这个问题折磨了我整整三天，最后查到一个大佬的资料后给解决了，问题就是版本原因，在webpack5之前的版本是这么写的：

{
    test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=70000&name=[hash:8]-[name].[ext]" },

就用上面的办法怎么试都没有图片，后来才发现我下载的webpack版本是5.72.0&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

майр

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

解决webpack打包中url-loader背景图片不显示问题

qq_48922481的博客

08-20

3297

首先，让我们从最初开始，一步步重现问题并将其解决第一步：在浏览器输入webpack，打开webpack中文文档第二步：点开loader，点击url-loader 第三步：安装url-loader 此处一定要加上版本号，不然会报错，安装哪个loder都一样 npm install --save-dev url-loader@2.0.0 安装完成后，在你的webpack.config.js里对其进行配置，这里的limit是一个重要的关键点配置...

webpack生成的css文件background-image url图片无法加载

weixin_30314813的博客

06-17

1754

之前在使用webpack3构建基于less预处理的项目时，在对指定的元素使用background-image: url(xxx)来设置背景图片时，本地开发是ok的，但是在项目编译产出后背景图片就找不到；目前用webpack4开发项目时，同样遇到类似的问题；所以就借此机会探讨一下产生问题的原因。问题产生原因 webpack3项目场景复现项目webpack有关css的配置伪码如下： output:...

参与评论您还未登录，请先登录后发表或查看评论

webpack5 中使用url-loader图片资源重复且不显示的问题

qq_43342124的博客

02-11

681

webpack5 中使用url-loader的问题当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为 ‘javascript/auto’ 来解决。 module.exports = { module: { rules: [ {

html5引用外文件css本地图片不显示,webpack css-loader在外部样式表的url（）引用中找不到图像...

weixin_39857480的博客

06-26

2489

我是整个Node / NPM / Webpack世界的新手，所以很抱歉，如果这很明显。我正在尝试构建一个与Webpack捆绑在一起的简单前端项目。我已经安装了节点，并配置了package.json文件。如果我在根目录中运行“ npmstart”，则从控制台不会出现任何错误，并且能够在浏览器中转到“ localhost：3000”，并看到“ hello，world”输出。我的下一个任务是包括一个样式...

html 图片资源放置,url-loader处理css中的图片资源遇到的问题

weixin_39846898的博客

05-31

300

处理css中的图片资源时，我们常用的两种loader是file-loader或者url-loader，两者的主要差异在于。url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于file-loader，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数。本文的主要想说的是我们在使用file-loader或url-loader时经常出现的图片地址...

解决webpack5使用url-loader打包图片不显示问题

qq_52622178的博客

03-08

3103

最近刚开始学习webpack，真是踩了一路的坑，一切都是因为webpack版本的不同。网上查的一些配置都是webpack4的配置，webpack4配置需要的模块可能到webpack5的时候就已经弃用了。这里说明一下我用的版本是webpack5.7 webpack5打包图片的基本配置如下：下图是处理背景图片的基本配置：【注意】其实在webpack5的官网中url-loader，file-loader已经是弃用了的，如果还要使用这两个废弃了的文件的话，必须加上最后那一句type: ‘javascript

url-loader打包图片不显示的问题

papyyaya的博客

04-29

1175

打包图片的时候出现了问题具体问题如下： 1.在没有配置图片打包的时候，不会报错，图片正常显示，但是如果要使html中的图片显示的话不配置就会出错 2.配置了url-loader，背景图片不显示 3.配置了url-loader,html-withimg-loader,背景图片不显示，html中图片显示正常 4.所以要解决两边都显示正常的问题，需要在test: /\.(png|jpg|gif|jpeg)$/下添加一个type配置，即: type: 'javascript/auto', 5.具体配置代码如下

webpack搭建项目时出现的报错“Module build failed (from ./node_modules/css-loader/dist/cjs.js) CssSyntaxError”...

weixin_30517001的博客

12-24

1万+

控制台出现的错误如下： webpack.config.js中的配置如下： module.exports={ entry:'./src/main.js', output:{ path:__dirname, filename:'dist/app.js' }, module:{ ...

Webpack 3.x 在CSS和Template中使用file-loader及解决image-webpack-loader 优化图片问题

热门推荐

Stan的专栏

11-27

1万+

如何在CSS或是template中使用图片？在CSS中使用，先安装file-loader：npm i -D file-loader安装完成后，在package.json中看到的当前版本："file-loader": "^1.1.5"接着在app.scss中加入下面的样式：html, body{ height: 100%; min-height: 100%; backgroun

css-validator-loader:用于CSS验证的简单Webpack加载器

04-29

与任何css / scss / postcss加载程序一起使用。 module: { rules : [ { test : / \. css? $ / , loader : 'css-loader!css-validator-loader' } ] } 关于该加载器将通过控制台中的友好警告来帮助您检测样式...

Webpack3.x 通过Webpack加载Bootstrap的CSS/Scss/JS 及更改CSS样式

Stan的专栏

11-27

2928

如何用webpack去加载bootstrap的css/scss 及JS呢，先准备一个bootstrap 模板b-index.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

webpack对静态资源的处理（url-loader 和 file-loader）解决图片加载不出来问题

weixin_43589827的博客

06-10

3567

解决前端图片加载不出来问题，url-loader和file-loader的关系

url-loader处理css中的图片资源遇到的问题

dz45693的专栏

10-27

8823

html img路径 404,webpack css背景图片无法现实，图片路径404

weixin_34303763的博客

06-17

615

项目引入sass，然后，尼玛，图片死活不显示……然后看下，尼玛，路径404，什么鬼？然后，编辑中级编辑css，是好的啊……这么到webpack里面，就不认图片路径了呢？//require('normalize.css/normalize.css');require('styles/App.scss');importReactfrom'react';//importHeaderfrom...

Webpack5 url-loader file-loader打包后，图片不能正常显示

qq_33767912的博客

09-04

2216

1.在webpack5中url-loader、file-loader已经弃用，如果想要继续使用则需要 ①在use后添加type: 'javascript/auto' ②url-loader默认采用ES模块语法，即import ‘…/aaa.png’；如果在引入css文件时是comandjs语法就会报错 require('./css/normal.css'); 所以需要将esModule设置为false 或者引用是写es语法 import ‘…/aaa.png’ module.exp..

html loader 路径,url-loader / file-loader使用webpack打破CSS输出中的相对路径

weixin_31807925的博客

06-18

631

我正在将Webpack与一些插件和加载程序结合使用，以获取src /文件夹并构建dist /文件夹。url-loader(当图像大于特定限制时回退到文件加载器)正在将它在我的html和scss文件中找到的图像输出到预期的正确目录。但是，它会更改那些文件中的相对路径，从而输出具有错误路径的css文件。文件结构：src/index.htmlassets/js/index.jsscss/style.sc...

【webpack】webpack打包后, 静态图片资源不显示的若干个问题

每天进步一点点, 靠近小目标一点点~

11-15

3822

最近在搭建公司的前端组件库, vue写的, webpack打包后, 在项目中引用组件库其中有个组件引用了静态图片资源, 然而打包后在项目中引用该组件的图片就不显示了遇到了以下若干问题, 小小记录一下~

webpack:sass-loader, scss中使用url加载图片报NotFound的三个解决方法

weixin_33804990的博客

06-16

2993

问题描述：使用vue-cli搭建好vue项目结构后，我在Home.scss中使用background-image: url('../../images/home_banner.jpeg');加载一个背景图片，没想到报错：This relative module was not found: * ../../images/home_banner.jpeg in ./node_modules/_cs...

ode_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/index.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/scss/base.scss 39 bytes [built] [code generated] [1 error] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/index.js??ruleSet[1].rules[2].use[2]!./node_modules/less-loader/dist/cjs.js!./src/less/base.less 39 bytes [built] [code generated] [1 error] ./src/main.js + 3 modules 1.25 KiB [built] [code generated] ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]