我是react的新手。我有一个由file-loader插件加载的图像数组,我这样映射它们:
images.map((img, index) => <img src={img}>
如何获取每个图像的宽度和高度属性?我知道如何设置这些属性,但是我不知道图像的高度和宽度,因为它们被存储在数组中。
我是react的新手。我有一个由file-loader插件加载的图像数组,我这样映射它们:
images.map((img, index) => <img src={img}>
如何获取每个图像的宽度和高度属性?我知道如何设置这些属性,但是我不知道图像的高度和宽度,因为它们被存储在数组中。
image-size-loader
这样的工具。file-loader
并不能提供您需要的功能。image-size
。 - loganfsmythclass ImgLoader extends Component {
constructor(props) {
super(props);
this.state = {
error: false,
};
}
onImgLoad = ({ target: img }) => {
this.setState({
width: img.width,
height: img.height,
});
};
onImgError = e => {
e.target.src = '/path/no-picture.jpg';
this.setState({
error: true,
});
};
render() {
const { image, alt } = this.props;
const { width, height, error } = this.state;
console.log(width, height, error);
return <img onLoad={this.onImgLoad} src={image} alt={alt} onError={this.onImgError} />;
}
}
有很多方法,而在前端世界中仍然存在哪些方法最好的争议。以下是两种简单的方法,可帮助您入门。
内联样式
<img style={{width: '50px', height: '50px'}} src={img} />
简单的CSS
import './MyCSSFileName'
<img className="fixed_img" src={img} />
// in your .css file
.fixed_img {
width: 50px;
height: 50px;
}
img { height: 40px; }
,这会影响该值吗?还是指实际图像在100%缩放下的大小?并且是为了在“render”函数内部使用还是稍后使用? - loganfsmyth