webpack打包发布中的图片路径问题记录：报错图片找不到、打包路径下没有生成images文件夹或少打包图片、打包之后打开页面img标签src=“[object Module]“

最新推荐文章于 2024-08-10 22:18:52 发布
最新推荐文章于 2024-08-10 22:18:52 发布
阅读量1.7k 收藏
点赞数 1
分类专栏： 前端 文章标签： vue.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_xiang_xiang/article/details/118364642
版权
在webpack打包发布过程中遇到图片路径问题，包括图片找不到、打包后images文件夹缺失或图片未打包、img标签src显示[object Module]。解决方法包括调整图片路径为实际路径、检查图片大小和配置assetModuleFilename以处理base64编码和模块引用。
摘要由CSDN通过智能技术生成

文章目录


最终打包结果结构
在这里插入图片描述

报错图片找不到

在这里插入图片描述

原本配置：

  • 我在 development 模式下测试的时候，是把主页 index.html 和 bundle.js 都放在虚拟内存中，即通过http://localhost:port/就可以直接访问
  • 还在使用webpack-dev-server的时候设置了 –content-base src ，也就是说静态资源的根目录是 src
  • 所以为了使用 src 文件夹下的 images 文件，在模板 img 标签 中引入的路径是/images/xxx.jpg，这是一个相对于服务器的路径，所以在打包发布是会因为找不到图片报错。
    在这里插入图片描述

在进行打包发布时：

  • 此时为了打包一个完整的项目࿰
最低0.47元/天 解锁文章
H_xiang_xiang
关注
专栏目录
webpack5.0中关于html文件中的img标签的图片显示不出的解决方法
Coralpapy的博客
08-05 774
一开始，单纯的我，希望直接通过html-loader把index.html文件中的东西通过template模板复制到dist目录下，从而形成一个完整的完美的打包后的入口文件，然后。。。。一直失败！！！ 开始时，我的webpack.config.js的配置 { test: /\.(htm|html)$/i, use: { loader: 'html-loader',
webpack文件夹打包_webpack打包后dist目录下没有images文件夹？
weixin_39853131的博客
12-20 493
Vision"webpack": "^3.10.0","webpack-dev-server": "^2.9.5"文件结构(打包前)：webpack.config.jsconst path = require('path');const webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plug...
webpack:url-loader打包后找不到图片、字体路径问题
m0_37709148的博客
01-17 1116
webpack:url-loader打包后找不到图片、字体路径问题
vue项目打包后出现图片引用路径错误的问题
最新发布
weixin_45016440的博客
08-10 576
根据‘build/webpack.base.conf.js’与‘config/index.js’对应关系，可知大于10000B的图片被打包到了‘static/img’目录，所以引用路径就变成了‘static/img/+文件名’。修改‘config/index.js’下assetsPublicPath的‘/’为‘./’，在‘build/utils.js’中ExtractTextPlugin.extract下添加‘publicPath: '../../'’
java打包后找不到图片路径,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
weixin_33216825的博客
03-22 508
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。问题一：我在打包完成后，打开index.html文件发现地址并没有携带路由。 这样的话页面就是空白了，因为没有组件被添加到页面中。打开F12会看到一堆的红色failed请求。打开请...
关于vue打包后图片路径找不到的问题
weixin_30479905的博客
08-07 4905
//asserts引入的静态资源是相对路径 //而static引入静态资源时必须是绝对路径 slides: [ { //当asserts引入动态绑定的静态资源时，需要以模块的方式导入资源， //将图片作为模块加载进去 src: require(‘../../../asserts/img/pic1.jpg’), ...
webpack打包后的文件夹是空的_webpack01-环境参数、webpack是什么、5个核心概念、打包css资源、打包less资源、打包html文件、打包图片资源、打包其他资源、devServer...
weixin_39603604的博客
12-19 283
D环境参数：node：10版本以上(10.4.0) 这里有个坑：10.4.0版本才开始支持BigInt对象webpack：4.26版本以上(4.44.1)webpack是什么：webpack是一种前端资源构建工具，一个静态模块打包器(modulebundler)在webpack看来，前端的所有资源文件(js、json、css、img、less……)都可以作为模块处理它将根据模块的依赖关系进行静...
vue 分模块打包 脚手架_关于vue-cli脚手架中webpack配置基础文件详解
weixin_30750349的博客
12-31 554
一、前言vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破，纯干料。重点章节点...
webpack打包实战
weixin_44387746的博客
08-02 284
在网页中会引用哪些常见的静态资源？ JS .js CSS .css .less .sass .scss Images .jpg .png .gif .svg 字体文件（Fonts） .svg .ttf .eot .woff .woff2 网页中引入的静态资源多了以后有什么问题？？？ 网页加载速度慢， 因为 我们要发起很多的二次请...
vued第11天：webpack-loaders的配置：处理css、less、图片、打包输出目录、清除目录插件，webpack开发服务器，生产环境和开发环境，ES6模块化使用
m0_46597922的博客
08-04 467
webpack webpack - loaders 的配置 webpack默认只认识 js 文件和 json文件, 但是webpack 可以使用 loader 来加载预处理文件, 允许webpack也可以打包 js之外的静态资源。 所以webpack如果要处理其他文件类型, 记得要先配置对应的 loader 没有css-loader的报错演示 require('./css/base.css') 报错图演示: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bxC5UswQ-1
webpack打包图片资源找不到问题
weixin_34409357的博客
12-12 913
当我们进行前端打包时，需改成如下配置： 往常这样打包是没有问题的，可是今天进行项目打包的时候缺报图片找不到的错误，如图所示： 头部组件的图片资源找不到错误，后台发现因为头部组件的背景图片size过大，超过了最大限度， 因此我们将图片的最大限度改大一点，就ok啦 于是我们需修改下webpack.bse.config.js里的配置，如下图： 这样就大功告成啦~ 转载于:https...
webpack打包后没有html文件,webpack打包后dist目录下没有images文件夹？
weixin_33327330的博客
06-16 871
Vision"webpack": "^3.10.0","webpack-dev-server": "^2.9.5"文件结构(打包前)：w用能境战求道，重件开又是正易里是了些之框ebpack.config.j求圈分件圈浏第用代是水刚道。的它还sconst path = require('path');const webpack = require('webpack');const HtmlWebpa...
webpack优化图片路径，不出现images文件夹
weixin_50680057的博客
11-06 270
在webpack.config.js中配置优化图片路径： {test:/.jpg|png|gifKaTeX parse error: Expected 'EOF', got '&' at position 30: …der?limit=22229&̲outputPath=imag…/,use:‘url-loader?limit=470&outputPath=images’},修改limit值后发现成功啦。原因是由于图片不可以大过limit值，否则图片就生成base64格式了。 .
webpack打包图片资源，图片不显示和index.html，HtmlWebpackPlugin
weixin_45441173的博客
02-25 1105
webpack打包图片资源，图片不显示和index.html，HtmlWebpackPlugin
moviepy应用pyinstaller打包后执行报错No module named imageio，no attribute audio-fadein
weixin_44206902的博客
05-19 1509
moviepy应用pyinstaller打包后执行报错AttributeError: module ‘moviepy.audio.fx.all’ has no attribute ‘audio_fadein’，ModuleNotFoundError: No module named ‘imageio’ 首先下载pyinstaller包，这个网上教程很多，就不多赘述。 ModuleNotFoundError: No module named ‘imageio’ 发生这个错误的环境是：我在pycharm外部工具
webpack-loader
weixin_34247155的博客
09-25 156
loader 是什么？ loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。 本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bun...
webpack5中打包html中的img图片不显示
m0_46333501的博客
03-22 2046
webpack4中只需要在url-loader配置esModule:false webpack5需要html-loader也配置 esModule:false
webpack对图片路径的处理
qq_38796823的博客
04-18 4347
前言 原本我们写在网页中的代码，其中对图片资源路径的引入，在打包后文件位置会发生变化，这时图片路径也会发生变化。 这时我们需要解决这个问题：不管位置怎么变，图片路径一定是正确的！ 图片大致分为如下几种情况： css中的图片问题 网页标签img中的图片（分为静态的和绑定的） 一、css中的图片问题 安装相应的图片解析模块【解析与压缩】 yarn add url-loader file-loa...
webpack 背景图路径错误导致图片出不来
assassin_0302的博客
05-28 2090
自己学习webpack的时候，打包之后，发现 img标签中的src图片能够现实出来，但是css中的背景图不能显示出来？？？ 解决：配置url-loader { test:/\.(gif|png|jpg)\??.*$/, use:{ loa...
webpack 打包图片放到images文件夹
06-08
要把 webpack 打包的图片放到 images 文件夹，你可以通过配置 webpack 的 `output` 属性来实现。具体步骤如下： 1. 在 webpack 配置文件中添加 `output` 属性，指定打包后的图片输出路径为 `images/`： ```js module.exports = { // 其他配置项 output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: '/', // 图片输出路径 assetModuleFilename: 'images/[hash][ext][query]' } } ``` 其中，`assetModuleFilename` 属性的设置可以让 webpack 将图片文件输出到指定的路径。 2. 在你的代码中使用图片时，需要使用 `import` 或 `require` 导入图片文件，如下所示： ```js import myImage from './path/to/image.png'; const img = document.createElement('img'); img.src = myImage; document.body.appendChild(img); ``` 这样，webpack 就会将图片文件打包到 `images/` 目录下，并在代码中使用打包后的文件路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值