运行 Webpack 项目图片和favicon.ico找不到，图片404错误

最新推荐文章于 2023-08-31 10:28:37 发布

大唐荣华

最新推荐文章于 2023-08-31 10:28:37 发布

阅读量1k

点赞数 1

分类专栏：大前端文章标签： webpack 前端

本文链接：https://blog.csdn.net/weixin_40599109/article/details/108337255

版权

在运行Webpack项目时遇到图片和favicon.ico显示404错误的问题。原因是url-loader导出资源时遵循ES模块语法，与vue-loader导入方式不匹配。解决方法是设置url-loader的esModule选项为false。对于favicon.ico404问题，可通过在HtmlWebpackPlugin中配置或使用copy-webpack-plugin来解决。调整配置后，项目运行正常。

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

解决办法：查看开发者工具和页面，发现图片链接为[object module] url-loader默认导出的内容遵循ES模块语法，而vue-loader导入资源默认以commonJS的方式导入 修改url-loader的options，增加 esModule: false

favicon.ico404错误：
方法一：直接在HtmlWebpackPlugin中配置修改HtmlWebpackPlugin

new HtmlWebpackPlugin({
   
  title: 'Webpack Vue',
  favicon: path.resolve(__dirname, 'public/favicon.ico')

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大唐荣华

关注关注

1
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

react项目打包部署上线完毕后，刷新报错404

读心悦

12-17

7031

报错分析：在浏览器内可以从首页跳转到其他路由地址，而不报错是因为这些是由前端自己渲染的。React Router定义的对应路由，脚本并没有刷新访问请求后台数据，是JS动态更改的location。当刷新时，先访问的是后台地址，反馈数据后再加载页面内的React代码，最后才在浏览器内执行，这时报错404。是因为后台并没有针对这个过程的路由给出返回的HTML内容，就没有执行React-Router。...

在使用Webpack打包本地img图片文件时图片加载失败 [object Module] 404 (Not Found)

"✧treasure mountain✧"

04-30

6825

问题描述在Vue组件里引入了一张本地的图片： <template> <div> <img src="../../images/test.png"> </div> </template> 然后图片就挂了：顿时一脸懵因为图片在本地是有的而且Ctrl+左键也能访问发现src变成了[object Module]： <i...

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

webpack 打包后图片名称不一致导致页面上图片404问题

萌新不会永远是萌新的博客

12-18

1622

webpack 打包后图片名称不一致导致页面上图片404问题 webpack 中使用 html-loader (| html-withimg-loader) 和 html-webpack-plugin时，打包后，image文件夹中图片的名字被转化，但是index.html img src使用的图片名字名字仍然是打包前图片的名字打包后图片的名字：打包后html 中引入的名字：导致页面...

webpack构建项目图片路径404问题....

weixin_33924770的博客

05-14

2645

一、 webpack-dev-server开发环境下的路径问题假设工程目录结构如图: 备注： react-news项目目录1 /node_modules/ ------ 项目依赖包文件 2 /dist/ ------ 打包生成目录 2 /src/ ------ 项目原始代码目录 2.1 /assets/ ----- 静态资源目录 ...

vue项目webpack打包后找不见favorite.icon

qq2277352816的博客

08-31

482

然后使用new CopyWebpackPlugin方法配置from: 'favicon.ico', to: 'favicon.ico'解决，在webpack.dev.conf.js和webpack.prod.conf.js都加入解决。1）刚开始看到在webpack.dev.conf.js的配置的new HtmlWebpackPlugin使用了favicon: path.resolve('./favicon.ico')，但未生效。使用npm run build打包后没有出现favicon.ico文件。

关于Vue项目中favicon.ico的应用配置&取消favicon.ico请求

daisymao0205的博客

12-15

6069

首先，一般把favicon.ico（固定命名）放在static里，如下图：在开发环境中，配置webpack.dev.conf.js里的plugins newHtmlWebpackPlugin里加上 favicon:'./static/favicon.ico',相对路径项目打包部署，便配置webpack.prod.conf.js里的plugins newHtmlWebpackPlugin里加上 favicon:'./static/favicon.ico',相对路径 ...

解决Vue 项目打包后favicon无法正常显示的问题

12-07

在开发Web应用时，添加favicon图标能够提升网站的辨识度和专业性。然而，在使用Vue.js框架构建项目时，可能会遇到打包后favicon图标无法正常显示的问题。这个问题通常与资源路径配置有关，尤其是在使用本地图片作为...

关于tomcat下启动vue项目，谷歌浏览器中favicon.ico的显示问题

weixin_43751396的博客

04-29

1383

关于favicon.ico的显示问题问题描述：vue项目使用npm run build打包之后，通过Tomcat启动，在谷歌浏览器访问路径错误，出现404，通过火狐访问正常的问题； 1.什么是favicon.ico 1.1 概念 favicon.ico图标是网站的缩略标志，可以显示在浏览器标签、地址栏左边和收藏夹，是展示网站个性的缩略logo标志，也可以说是***网站头像*** 从特定的技术角度看，favicon也并不只是仅仅让网站给人更专业的观感，也可以在一定程度上减轻服务器的流量带宽占用，一般为了提

vue favicon设置以及动态修改favicon的方法

12-07

favicon图片放到该文件夹下。然后再index.html中添加： <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" rel="external nofollow" > 然后刷新浏览器，就会更新。如果没有效果，...

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

weixin_34303763的博客

06-17

611

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

安装webpack报错：npm ERR! 404 Not Found: @webassemblyjs/ast@1.7.11

weixin_41646804的博客

12-24

5248

webpack的版本不兼容。

不能忽略的Nginx做web服务器的favicon.ico图像找不到问题

热门推荐

雪峰流云

03-25

5万+

我们在使用Nginx搭建HTTP的web server的过程中，一般都很顺利，默认的网站根目录一般是/usr/local/nginx/html，我们也可以正常访问到Nginx的欢迎信息，比如使用下面的网址： http://localhost/ 但是发现运行一段时间后，Nginx的error日志中会定期抱怨说，没有找到favicon.ico文件？发生这种错误的原因一般是Nginx在根目录上找

用Java读取ico文件，用ico做新的鼠标图标。

飞羽飞の猪の博客

11-10

4933

用Java读取ico文件，用ico做新的鼠标图标。昨天需要在程序里用ico做鼠标，但在jdk中没找到可以读取ico文件的方法。只好到网上找，在百度里搜索了半天也没看出个啥，用google搜索 ‘java ico’一下就搜索出来办法了。 0 前言进入下面这个地址:http://www.acproductions.de/commercial/aclibico/

webpack图片问题小结

Armor的博客

05-11

885

虽然是一个小问题，但是遇到坑的时候依然觉得很烦躁。最常见的问题就是404 not found，比如下面报错GET http://localhost:8080/user.img 404 (Not Found)先分析在webpack项目中图片的应用场景： 1. HTML文件中img标签的src属性引用或者内嵌样式引用<img src="photo.jpg" /> <div style="backgro

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

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

11-15

3797

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

vue项目中配置favicon图标

m0_67841039的博客

08-25

900

vue项目中配置favicon图标

html ico 图片无效,favicon.ico不显示的原因分析和解决办法

weixin_28723109的博客

06-04

4409

最近尝试着给我的网站加了一个favicon.ico图标。正常的情况下可以用Favicon-Manager这个插件来实现，具体办法我参照了zEUS.给出的方案。你也可以在这里下载该插件。启用这个插件后，在后台设置好favicon.ico的绝对路径，然后就OK了。但是如果你也像我一样，在首页有一个跳转页面的话，那就不灵光了，在首页仍然显示不出这个图标，即使我把favicon.ico丢在了根目录下。 ...

vue的favicon.ico不显示

运行 Webpack 项目图片和favicon.ico找不到， 图片404错误

运行 Webpack 项目图片和favicon.ico找不到，图片404错误