脚本标记中的Paperclip图像集显示的是图像文本url，而不是图像-expandablebanners.js

Paperclip image set within script tags shows the image text url not the image - expandablebanners.js

本文关键字：图像 url js -expandablebanners 文本 显示 Paperclip 脚本      更新时间：2023-09-26

我在rails网站上使用expandablebanners.js，显示滚动图像的代码是；

      <script type="text/javascript">
        var roll_img = "<%= @advert.roll_img.url %>"
        var squarecenterbottom = ExpandableBanners.banner("squarecenterbottom", roll_img);
        squarecenterbottom.animated = true;
        squarecenterbottom.setDirection('down', 'center');
        squarecenterbottom.expandOnClick = false;
        if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
        else if (!window.onload) window.onload = function(){documentReady=true;}
      </script>

主图像就这样显示在页面上；

         <%= link_to image_tag(@advert.img(:horizontal) title: @advert.name,),
             @advert.target_url, :id => 'squarecenterbottom' %>

当您滚动主图像时，它应该显示滚动图像，但是当我滚动图像时，它只显示滚动图像的url(即文本(，我不知道问题是什么…

代码输出为；

<script type="text/javascript">
        var roll_img = "http://localhost:3000/system/adverts/large_imgs/000/000/004/original/1n.jpg?1401967781"
        var squarecenterbottom = ExpandableBanners.banner("squarecenterbottom", roll_img  );
        squarecenterbottom.animated = true;
        squarecenterbottom.setDirection('down', 'center');
        squarecenterbottom.expandOnClick = false;
        if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
        else if (!window.onload) window.onload = function(){documentReady=true;}
      </script>
      <a href="www.example.com id="squarecenterbottom"><img alt="test22" height="90"  src="/system/adverts/imgs/000/000/004/horizontal/2n.jpeg?1401818651" title="test22" width="730" /></a>
  </div>

这是文档中的代码，展示了它的工作原理；

<script type="text/javascript">
    var squaretopleft = ExpandableBanners.banner("squaretopleft", "images/square_expanded.jpg");
    squaretopleft.setCloseImage("images/closebutton.jpg", 'left', 'top');
    squaretopleft.animated = true;
    squaretopleft.setDirection('up', 'left'); 
    squaretopleft.expandOnClick = false;
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
else if (!window.onload) window.onload = function(){documentReady=true;}
</script>
</head>
<body> 
<a id="squaretopleft" href="www.yourwebsite.com"><img src="images/square.jpg" /></a>
</body>
</html>

这可能是路径或HTML结构问题
检查事项：

  1. 在输出中，<a>元素紧跟在<script>之后。然后是</div>结束标记。你有空的<div>吗？他们都在<body>吗
  2. 由于ExpandableBanners代码设置了onload和DOMContentLoaded侦听器，请尝试将其移动到文档的<head>中
  3. 您的原始图像的扩展名为.jpeg，滚动图像的扩展号为.jpg。这没什么问题，但请确保在正确的路径中有正确的图像(和扩展名(。例如，原始图像在/imgs文件夹下，而滚动在/large_imgs下。这样可以吗
  4. 尝试滚动图像的相对路径。在这种情况下：从一开始就删除http://localhost:3000。(假设您的原始图像显示正常。(

几点：

  • var roll_img...声明末尾缺少分号
  • 正如Ruby Racer所提到的，生成的锚标记缺少双引号<a href="www.example.com
相关文章：