我服务cloudinary图片本文档响应下面的窗口大小的变化:Cloudinary响应图像显示仅在使用反应的WebPack
我index.hjs看起来是这样的:
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-
core/2.3.0/cloudinary-core-shrinkwrap.js" type="text/javascript">
</script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/static/bundle.js"></script>
<script type="text/javascript">
var cl = cloudinary.Cloudinary.new({cloud_name: "myCloudName"});
cl.responsive();
</script>
</body>
元件渲染图像根据以上文档具有此:
{this.state.images.map(function(image, i){
return <img key={i} className="cld-responsive thumbnail"
data-src={image.albums.images}/>})}
问题是在初始渲染时,图像渲染为100%宽度为0的高度,根本没有出现。但是,如果我调整窗口大小,会显示响应图像。
我需要的
cl.responsive();
移动到我的代码别的地方?我尝试将它移动到组件中并使用componentDidMount()触发状态刷新,但图像仍然不会在重新渲染时显示;只有在窗口大小调整的情况下。
任何帮助表示赞赏。
你还可以分享你设置图像的HTML部分吗? –