Question

我编写了一个Web应用程序代码，其中有一些图像标记，我将其设置为无。像示例代码。我的问题是当我在某些设备上运行图像时无法加载。当我设置图像显示只有空白显示。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
   <g id="gimg">
      <image id="img" display="none" xlink:href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="50px" width="50px"/>
  </g>
  <rect id="myrect" x="100" y="100" width="20" height="20"></rect>
</svg>  
<script>
$("#myrect").on("click",function(){
    $("#img").show();
});
  
</script>

Answer 1

如果问题出现在手机中，请尝试：

$("#myrect").on("click",function(){
   $("#img").show();
   return false;

});

Answer 2

您可以将 style = display：none 添加到您的图片元素

<image id="img" style="display:none" xlink:href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="50px" width="50px"/>.

这应该加载图像

Answer 3

你试过这种方式吗？

<svg>
<defs>
<symbol id="my-icon" viewBox="0 0 30 30">
  <rect id="myrect" x="25" y="25" width="20" height="20" />
</defs>
</symbol>
<image id="img" display="none" xlink:href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="50px" width="50px" />

</svg>


$("#myrect").on("click", function() {
$("#img").show();
 });

只需根据您的要求更改viewBox等。我希望这会有所帮助。

设置显示无时，SVG图像不显示

3 个答案: