Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

滚动条向下滚动,图片没有加载出来 #4

Open
NieHang opened this issue Jun 5, 2019 · 3 comments
Open

滚动条向下滚动,图片没有加载出来 #4

NieHang opened this issue Jun 5, 2019 · 3 comments

Comments

@NieHang
Copy link

NieHang commented Jun 5, 2019

这是我的ItemWeb组件代码:

import React from 'react';

import Lazyimg from 'react-lazyimg-component';

export default function ItemWeb(props) {
	return (
		<div className="item__web">
			<a href={props.address} target="block">
                               <Lazyimg
                                  className="lazy"
                                  src={props.imgUrl}
                                />
				<p>{props.name}</p>
			</a>
		</div>
	);
}

我是通过map循环生成的ItemWeb组件:

<div className="item__wrap">
  {value.websites.map(item => (
    <ItemWeb
       key={item.id}
       name={item.name}
       imgUrl={item.imgUrl}
       address={item.address}
    />
  ))}
</div>

情况是这样的:
image

@NieHang
Copy link
Author

NieHang commented Jun 5, 2019

但是当我调出控制台的时候,图片就又出来了
image

@NieHang
Copy link
Author

NieHang commented Jun 5, 2019

当我在配置项中加入container: document.getElementById('study')时,懒加载就成功了,study是我最外层的一个容器组件。但是会报错:
image

@NieHang
Copy link
Author

NieHang commented Jun 5, 2019

我后来将插件改用react-lazyload解决了,原因在于装载图片的父级容器有个overflow属性,我在lazyload的配置中设置了overflow={true}就解决了,应该就是overflow的问题

@NieHang NieHang closed this as completed Jun 5, 2019
@NieHang NieHang reopened this Jun 6, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant