Cloudinary响应图像显示仅在使用反应的WebPack

问题描述：

我服务cloudinary图片本文档响应下面的窗口大小的变化：Cloudinary响应图像显示仅在使用反应的WebPack

http://cloudinary.com/blog/how_to_automatically_create_images_for_responsive_design#implementing_responsive_design_with_cloudinary_s_javascript_library

我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部分吗？ –

答

当设置了responsive属性时，SDK会在调整大小时自动更新图像。

示例代码：

<div className="image-holder"> 
    <Image publicId="sample" responsive> 
     <Transformation width="auto" crop="scale"/> 
    </Image> 
</div>

链接到完整的例子：https://codepen.io/eitanp461/project/editor/ZoNNkP

注意Cloudinary的阵营SDK取决于cloudinary-core所以你不需要加载它从你的index.html一个单独的脚本。

我之前没有使用cloudinary-react库。然而还有一个问题是我无法使用地图功能来创建如下图像列表： '{displayImages.map（function（displayImage，i）{ return }）}' –

你知道解决这个问题的方法吗？ –

没关系，我能够找到一个遵循我自己格式的示例。 –

Cloudinary响应图像显示仅在使用反应的WebPack

相关推荐