今天我们要来说一说一个很常用的东西:一个图片组件,不用写一堆繁琐的 onError
,不用把代码搞的到处都是,当图片加载失败时,会用默认图片代替原来的图。
实现原理
img
标签有一个 onerror
事件,当图片加载失败时就会执行这个事件,我们只要在这个事件中,替换图片的 src
属性,就可以在加载失败时用默认图替换原有的图片。
1 | <!-- logo.png加载失败时,会显示logoError.png --> |
心者,栖神之舍;神者,知识之本;思者,神识之妙用也。
已经研究了一年左右react,目前时机成熟,知识储备足够,我们决定正式在生产环境使用react+ts,期间遇到了一些只在生产环境需要考虑的问题,也踩了许多坑,这个系列会持续更新,记录react在针对生产环境开发和部署时遇到的实际问题、分析过程和解决方案。
本系列文章适合有webpack基础、对前端架构设计有一定了解、写过react+ts代码的前端工程师阅读,不适合萌新和不熟悉ts的同学。
写这个系列的主要目的是分享解决问题的思路和方案,而不是教程,要读懂这些文章,你必须:
本篇是前文的扩展延伸。
webpack在开发时的输出信息有一大堆,可能会干扰我们查看信息,以下提供一个美化、精简输出信息的建议。
精简以下开发服务器输出信息,修改webpack.dev.js
:
1 | // ...webpack configs |
打包用的配置基本完成了,现在我们来配置一下开发环境。
首先处理通用配置config.js
:
1 | module.exports = { |