parcel 开展装包,引进图片文件

lxf2023-12-16 01:10:01

环境

原生态 html 开发设计微信公众平台 h5 网页页面,应用 parcel 开展装包,引进图片文件在本地环境中一切正常,可是部署到检测设备后不正常的表明,不出错,仅仅表明如下所示标志:

parcel 开展装包,引进图片文件

缘故

有时尚博主说因为照片虽是 .png 后缀名的,可是文件格式webp 在一些 ios 中不能正常表明。我查看了下,图片的格式并非webp。因此消除了此缘故。

然后我就运作装包指令,看了一下装包后文档,我发现了在 html 是以 <img src="./img/aaa.png" />方式引进的网络资源都装包进去,应用 js 引进的网络资源并没有装包进来。

主要原因是 parcel 是依据 source 配备的 html 文件进行依靠讲解的,因此 js 里的网络资源并没有装包进来。

处理

js 存储资源的引进改为:

const rejectImg = new URL(
    '../img/aaa.png',
    import.meta.url
  );

官方网站

网站上说:

Parcel will process any files referenced by a URL dependency as it does any other dependency. For example, images will be processed by the image transformer, and you can use query parameters to specify options to resize and convert them. If no transformers are configured for a particular file type, then the file will be copied into the dist directory unmodified. The resulting file names will also include a content hash for long term cacheability in the browser.

翻译是:

Parcel将像处置别的依赖项一样解决URL依赖项提及的一切文档。比如,图象会由图象转化器解决,您可以选择查询参数特定修改尺寸和变换他们这个选项。要是没有为特殊文件属性配备转化器,则该文件将不会加改动地拷贝到dist文件目录。产生的文件夹名称也将包括一个具体内容散列,用以用浏览器内进行长期性缓存文件。

本站是一个以CSS、JavaScript、Vue、HTML为中心的前端开发技术网址。我们的使命是为众多前端工程师者提供全方位、全方位、好用的前端工程师专业知识和技术服务。 在网站上,大家可以学到最新前端开发技术,掌握前端工程师最新发布的趋势和良好实践。大家提供大量实例教程和实例,让大家可以快速上手前端工程师的关键技术和程序。 本站还提供了一系列好用的工具软件,帮助你更高效地开展前端工程师工作中。公司提供的一种手段和软件都要经过精心策划和改进,能够帮助你节约时间精力,提高研发效率。 此外,本站还拥有一个有活力的小区,你可以在社区里与其它前端工程师者沟通交流技术性、交流经验、处理问题。我们坚信,街道的能量能够帮助你能够更好地进步与成长。 在网站上,大家可以寻找你需要的一切前端工程师网络资源,使您成为一名更加出色的网页开发者。欢迎你添加我们的大家庭,一起探索前端工程师的无限潜能!