技巧19：如何使用ZML代码段在Pages中显示图像

技巧19：如何使用ZML代码段在Pages中显示图像

原文链接：https://help.zoho.com/portal/en/community/topic/tip-19-how-to-display-images-in-pages-using-zml-snippets

嗨伙计，

关于如何使用Zoho标记语言（ZML）在Zoho Creator中创建交互式页面的另一个提示，我们回来了。您可以使用ZML代码片段向页面添加各种组件，并以有意义的方式构造它们。但是，这还不是全部-使用ZML，您可以确保您的应用程序自动与各种设备兼容，而不会出现任何不一致之处。

我们经常从用户那里获得有关如何在ZML代码中调用Deluge脚本的问题。这是一个向页面添加图像的简单用例：

第1步

首先，我们需要创建一个函数来帮助我们检索存储在应用程序中的图像。我们需要做的就是获取包含图像的记录的RECORD ID，生成图像的下载URL，并在ZML代码段中使用它。

1. string getImage(int id)
   
2. {
   
3. fet = images[ID == id];
   
4. var = fet.Image.getSuffix("downqual = \"").getSuffix("image/").getPrefix("\"");
   
5. img = "https://creatorexport.zoho.com/file/<app_owner>/<app_name>/<report_linkname>/" + fet.ID +       "/<image_field_linkname>/image-download?filepath=/" + var;
   
6. return img;
   
7. }

第2步

接下来，您可以转到页面构建器，拖放ZML面板，并调用上面的函数（getImage），在其中将ID传递给该函数以检索图像的URL。

1. <%
   
2. {
   
3. x = thisapp.getImage(id); //page param with ID is "id"
   
4. %>
   
5. <panel>
   
6. <pr height='fill' width='fill'>
   
7. <pc width='100%' bgColor='#FFFFFF' padding='20px' hAlign='center' vAlign='middle'>
   
8. <pr height='auto' width='auto'>
   
9. <pc>
   
10. <pr>
    
11. <pc>
    
12. <image color='#FFFFFF' bgColor='#0ABB51' width='1000px' height='1250px' imageType='weburl' value='<%=x%>' /> </pc>
    
13. </pr>
    
14. <pr>
    
15. <pc>
    
16. <text type='Text' value='120' size='8' color='#0ABB51' bold='true' marginTop='3px' textAlign='center'> </text>
    
17. </pc>
    
18. </pr>
    
19. <pr>
    
20. <pc>
    
21. <text type='Text' value='Open tickets today' size='3' color='#333333' marginTop='3px' textAlign='center'> </text>
    
22. </pc>
    
23. </pr>
    
24. </pc>
    
25. </pr>
    
26. </pc>
    
27. </pr>
    
28. </panel>
    
29. <% 
    
30. }
    
31. %>

如果您想了解有关ZML的更多信息，请查看我们的ZML  指南，其中涵盖了您的所有基础知识。

我们希望这篇文章有用！如果您有任何疑问，请随时在下面的评论中提问，我们很乐意尽快解决！

下次再见，还有更多有趣的创作者提示！