我在使用CRA创建的React应用程序中显示了一张图片。每次重新加载网页时,图片会出现奇怪的闪烁如下图所示。
图片初始状态:
闪烁后的图片(实际要求):
代码:
styles.css:
img {
width: 200px;
height: 300px;
object-fit: cover;
}
app.tsx
import React from 'react';
import foo from './foo.jpg';
import './styles.css';
const App = () => <img src={foo} alt="foo" />;
export default App;
package.json
{
"name": "xyz",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
注:
- 该应用程序是一个注入的样板,没有安装任何第三方库或除此图像之外的任何其他组件。
- 如果从样式表中删除
object-fit:cover;
属性,则上述问题会得到解决,但这是为了防止图片像初始图片一样被奇怪地拉伸/ 收缩而需要的。 - 如果无法重现此问题,请保持开发人员控制台打开或尝试将网络更改为任何 3G 预设。 我可以轻松地通过反复重新加载来重现。
- 我认为
object-fit: cover
属性最初不适用于图像,并需要几毫秒才能启动。 - 请注意,在初始图片中,DOM 结构不显示在开发人员控制台中。
- 任何替代 CSS 属性也将非常有帮助。