基于 webpack 打包动态加载图片 src 问题

233jl 发布于2019-08-22 16:15 / 2073人阅读

摘要：基于打包动态加载图片问题直接上代码动态图片路径结果结果发现图片不显示，错误码为。好了，根据上述的解决方案，能不能行呢下面对应的试一下方法一源码方法二源码结果好了，经过试验，可以完美解决问题。

基于 webpack 打包动态加载图片 src 问题

直接上代码：

结果：

结果发现图片不显示，错误码为 404。

报错的原因：在 webpack 中会将图片当做模块来用，比如：[{img:require("./src.jpg")}]因为是动态加载的，所以 url-loader 将无法解析图片地址。

常见的解决办法有两种：

用 require 蒋图片作为模块加载，这时候 webpack 打包时，会将 require 打包成模块。

将图片放到 static 目录下，但必须写成绝对路径，比如：[{img:"/static/src.jpg"}]。

好了，根据上述的解决方案，能不能行呢？下面对应的试一下！

方法一：

源码

方法二：

源码

结果：

好了，经过试验，可以完美解决问题。

云服务器 GPU云服务器 js数组动态加载图片 Webpack打包分块 webpack按需加载 html图片src

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94185.html

webpack 基础与项目优化实践总结

摘要：前言本文基于，主要涉及基本概念基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行优化配置。同一文件中，修改某个影响其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行...

Scorpion 2019-08-23 18:15 评论0 收藏0
Webpack 项目优化杂记

摘要：入口文件打包出口地址在中可以配置我们的地址这里你要有一个七牛云的账户。特别像是七牛云这样拥有图片处理引擎的服务商，我们还可以通过来处理上传至的图片。本项目源码均可在这里找到。之前公司的官网项目静态文件都是放在静态服务器中，这其中的弊端就不赘述了。简单说一下 CDN 的好处: CDN 可以解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。使用户可就...

incredible 2019-08-23 13:53 评论0 收藏0
Webpack 4 和单页应用入门

摘要：但由于和技术过于和复杂，并没能得到广泛的推广。但是在浏览器内并不适用。依托模块化编程，的实现方式更为简单清晰，一个网页不再是传统的类似文档的页面，而是一个完整的应用程序。到了这里，我们的主角登场了年此处应有掌声。和差不多同期登场的还有。 Github：https://github.com/fenivana/w...webpack 更新到了 4.0，官网还没有更新文档。因此把教程更新一下...

Zoom 2019-08-21 11:23 评论0 收藏0
Webpack快速入门

摘要：了解相关什么是是一个模块打包器。配置文件默认是一个模块，返回一个格式的配置信息对象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息选项中指定。了解Webpack相关什么是webpack Webpack是一个模块打包器(bundler)。在Webpack看来, 前端的所有资源文件(js/css/img/less/...)都会作为模块处理它将根据模块的依...

laznrbfe 2019-08-20 18:13 评论0 收藏0
Webpack快速入门

摘要：了解相关什么是是一个模块打包器。配置文件默认是一个模块，返回一个格式的配置信息对象插件插件件可以完成一些不能完成的功能。插件的使用一般是在的配置信息选项中指定。了解Webpack相关什么是webpack Webpack是一个模块打包器(bundler)。在Webpack看来, 前端的所有资源文件(js/css/img/less/...)都会作为模块处理它将根据模块的依...

curried 2019-08-29 12:58 评论0 收藏0