在png图像中找不到Webpack导出
在PNG图像中找不到Webpack导出通常是指在使用Webpack打包工具进行前端开发时，无法找到对应的PNG图像文件。
- PNG图像是一种常见的图片格式，它使用无损压缩算法，支持高质量的图像显示。Webpack是一个现代化的前端打包工具，用于将多个前端资源进行合并、压缩和优化，以提高网页性能。
- 在使用Webpack进行项目打包时，通常会配置一个文件加载器（loader）来处理各种类型的文件，包括图像文件。常用的图像加载器有file-loader和url-loader。
- 当Webpack在打包过程中遇到PNG图像文件时，它会根据配置的加载器来处理该文件。加载器会将图像文件复制到输出目录，并生成一个对应的文件名作为导出的资源。
- 如果在打包后的项目中找不到Webpack导出的PNG图像，可能是以下原因：
- 配置错误：请检查Webpack配置文件中的加载器配置，确保正确地处理PNG图像文件。可以参考Webpack文档或加载器的官方文档了解正确的配置方式。
- 文件路径错误：请确保PNG图像文件的路径正确，并与Webpack配置文件中的路径匹配。可以尝试使用相对路径或绝对路径来解决该问题。
- 文件丢失：如果PNG图像文件在打包过程中被删除或移动，Webpack将无法找到该文件并导出。请确保PNG图像文件存在，并位于正确的位置。
- 对于Webpack导出PNG图像的优势，可以提及：
- 优化性能：Webpack可以对PNG图像进行压缩和优化，减小文件体积，提高网页加载速度和性能。
- 模块化管理：Webpack可以将PNG图像作为模块进行管理，方便在代码中引用和使用，提高开发效率。
- 自动化处理：Webpack可以自动处理PNG图像的复制、重命名等操作，简化开发流程。
- PNG图像的应用场景广泛，适用于各种类型的网页和应用程序，包括但不限于：
- 网页设计：PNG图像支持透明背景和半透明效果，常用于设计精美的网页元素，如Logo、图标等。
- 图片展示：PNG图像可以保持较高的质量，适合用于展示高清图片、艺术作品等。
- 游戏开发：PNG图像可以作为游戏中的纹理贴图，用于呈现游戏场景、角色等。
- 移动应用：PNG图像广泛用于移动应用中的图标、界面元素等。
- 对于腾讯云相关产品和产品介绍链接地址，可以根据实际需求选择适合的产品，例如：
- 对于图像存储和处理需求，可以使用腾讯云的云存储COS（https://cloud.tencent.com/product/cos）和图片处理CI（https://cloud.tencent.com/product/ci）。
- 对于前端静态资源的托管需求，可以使用腾讯云的对象存储COS（https://cloud.tencent.com/product/cos）。
- 对于前端工程化和自动化构建需求，可以使用腾讯云的云开发（https://cloud.tencent.com/product/tcb）和云托管（https://cloud.tencent.com/product/scf）。
- 对于网络安全需求，可以使用腾讯云的Web应用防火墙（https://cloud.tencent.com/product/waf）和DDoS防护（https://cloud.tencent.com/product/antiddos）。
总之，解决在PNG图像中找不到Webpack导出的问题，需要检查Webpack配置、文件路径和文件是否存在，并可结合腾讯云相关产品进行图像存储、处理和托管。
相关·内容
1回答
我正在尝试做一个网站下的Webpack，ReactJS，巴别塔，快递和萨斯，到目前为止，所有的工作都很完美，但当我试图导入这样的图像： import { Logo } from './../../Logo.png'; 在下面这样的图像中使用它： <img src={ Logo } alt="Logo" /> 我得到了这个错误： ./Logo.png' 我在网上尝试了许多解决方案，但都没有解决我的
浏览 22提问于2020-10-01得票数 0
我试图使用require语句动态导入图像，但即使在此之前，像这样的常规导入也不起作用：实际用例是：Module not found: Error: Can't resolve 'assets/img/coin.png' in
浏览 3提问于2017-05-02得票数 2
回答已采纳
我想从webpack的jpg/png生成webp文件。为此，我使用了图片webpack插件()。在插件文档中，它写到webp附加优化器“将JPG & PNG图像压缩为WEBP”()，但是在遵循文档步骤之后，转换就无效了。
webpack
浏览 1提问于2019-11-12得票数 6
回答已采纳
3回答
React从公用文件夹导入图像
、、、、
我正在尝试从我的公共目录中获取静态图像，但是找不到。我没有使用CRA，所以可能是我遗漏的一些关于Webpack的配置。使用文件加载器模块和导入图像可以在开发模式下工作，但不能在我的生产服务器规范中工作 我的项目结构： \public \images \component...webpack</
浏览 12提问于2019-10-09得票数 4
回答已采纳
图片不能加载在浏览器使用的Webpack 4与网址加载器，或文件加载器。小图像不在数据url中(或者如果它们在浏览器中，浏览器不会显示它们)，并且文件网络请求不是通过文件加载器发出的。Nginx在https://{server}/images/image_name.png上正确地服务了图像，但https://{server}没有，并且在web inspect
浏览 0提问于2019-10-03得票数 4
回答已采纳
我正在开发一个react和Webpack 3应用程序。目前，我正在将SVG作为组件导出到js中，并将其导入到JSX中。
我应该使用webpack加载器来做这件事吗？如果是，我应该使用哪个加载器？
浏览 0提问于2018-09-28得票数 3
我在制作React组件npm包时遇到了一个问题。在这个包的一个组件中，我使用了一个图像(从‘MyPicture /image.png’导入路径)。我想把它作为一个git npm包导出，所以我安装了babel来转换它，它在将png转换成js时失败了，所以我安装了webpack并使用了image-loader + babel-loader。npm start上的所有东西都可以工作，但我的IDE (Webstorm)看不到webpack构建后的路径
浏览 32提问于2020-10-03得票数 0
我想要创建一个苗条组件(基于webpack)，它使用/导入静态图像。如何确保图像得到正确的导出，即使用我的组件的svelte应用程序也能看到图像？在我的组件中，我尝试导入图像并使用webpack的文件加载程序：和 test: /\.(png|svg|jpg|gif)$/,
浏览 0提问于2020-05-04得票数 5
回答已采纳
2回答
我希望它包含一组图像(主要是图标的.png文件)，然后可以由子项目导入。我可以从库导出图像，我可以在子项目的node_modules中看到它们，名称被破坏了。但是，import {imgName} from "myLib"不包括子项目的包中的文件。This tells
webpack to include that file in the bundle.在我的情况下，CRA可能不会触发webp
浏览 0提问于2021-04-26得票数 0
回答已采纳
我用webpack2创建了一个React项目，并使用webpack开发服务器预览了结果.首先，我使用CLI来启用HMR，如下所示：一切都很好浏览器没有显示图像，控制台总是显示404错误，如下所示：
use: ['file-loader?name=/img&
浏览 1提问于2017-06-09得票数 0
回答已采纳
6回答
我正在开发一个React应用程序，并使用Webpack &类型记录。我想在其中一个<img/>标记中使用图像。但是，我没有找到访问图像文件的正确方法。 ...(png|jpe?} ]... return <img src='/assets/logo-large.png' alt=&qu
浏览 7提问于2017-04-26得票数 59
回答已采纳
我希望显示的图像能够自定义，通过它在模板中使用的变量传递。但是当与Webpack一起构建时，Webpack试图遵循模板中的链接将文件打包在一起，却找不到{{ variableName }}。代码<img src='{{ imgToShow }}' /> {
test: /\.(png|jpe?
浏览 3提问于2016-11-07得票数 0
回答已采纳
所以我只想在我的反应性应用程序中使用一些图像，但是图像没有加载。有些图像是在CSS中设置的，如：另一种我想用img标签在内部反应组件中使用图像的方法，我该怎么做呢？这是我的webpack配置：const MiniCssExtractP
浏览 1提问于2018-07-05得票数 2
回答已采纳
3回答
我的应用使用的是NodeJs、webpack和ES2015。import "../../css/image/t1.png";const webpack = require( "webpack" );const m
浏览 1提问于2016-05-13得票数 6
回答已采纳
1回答
我有一个和这个脚本捆绑在一起的应用程序，叫webpack。此脚本还可以导出文件。'bundle.js', },
浏览 4提问于2018-02-22得票数 0
回答已采纳
我是新来的webpack。在开发模式下，我正在尝试访问src文件夹之外的资产文件。我在互联网上找到的唯一解决方案就是使用拷贝-webpack-插件。但我认为这是为了构建。但是因为我处于开发模式，所以所有的东西都会加载到内存中。我可能错了。这是我现在的文件结构，<!create a production bundle, use `npm run build` or `yarn build`. &l
浏览 0提问于2021-05-07得票数 0
我正和Webpack一起面对这个奇怪的问题。花了几个小时后却找不到解决办法。let img = require('../../../img/imgN.png');$bg-img: url('../img/bg-img.png');
webpack并没有加载
浏览 2提问于2016-03-07得票数 1
回答已采纳
1回答
在此处输入图像描述 未捕获原型:无法读取模块../TypeError处未定义的eval (config.js?228e:6)的属性“prototype” _ modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:6778) webpack _ 要求/node _ modules/bootstrap-vue/esm/utils/pros.js (chunk-vendors.js:7054) <em
浏览 88提问于2021-03-02得票数 0
回答已采纳
4回答
我正在使用es6，并希望导入一个图像，以供webpack使用。看看，这就是他们给出的例子：url现在将返回类似于/static/351f9446b3ba577b6a79e373e074d200.png的内容但这不起作用，因为url仍然没有定义。如果是<
浏览 6提问于2016-09-12得票数 28
回答已采纳
看起来，如果图像标签在我的index.ejs模板中，我丢失了在webpack配置中加载图像的设置。在构建过程中，我项目中html文件中的所有图像都会被正确地重命名并加载，但是.ejs文件中的图像标记被忽略了。
也就是说，在我的.ejs中，如果我有<img src="../../home.png">
浏览 6提问于2016-11-09得票数 10
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
