在脚本标签中设置的回形针图像显示图像文本 url 而不是图像 - expandablebanners.js答案

【问题标题】：Paperclip image set within script tags shows the image text url not the image - expandablebanners.js在脚本标签中设置的回形针图像显示图像文本 url 而不是图像 - expandablebanners.js
【发布时间】：2014-06-05 12:59:08
【问题描述】：

我在 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>

【问题讨论】：

我不确定，但似乎问题来自于在 javascript 代码的第一行中为 roll_img 的定义加上引号。你还尝试了什么？
我会试着把这条线写成这样：var roll_img = <%= @advert.roll_img.url %>;
能否提供主图的输出。主图像的错误代码应该是问题。
@JakeSmith url 需要作为字符串传递，这就是为什么它在引号中
@OnurYıldırım 我已将图像输出添加到问题中

标签： javascript ruby-on-rails ruby-on-rails-3 image paperclip

【解决方案1】：

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

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

【讨论】：

1.是的，之前有一个 div，一切都在正文中，2. 移动到头部没有区别，3. 图像具有正确的路径并在正常使用时正确显示，4. 有或没有绝对 url 不会改变任何东西跨度>

【解决方案2】：

几点：

var roll_img... 声明末尾缺少分号
正如 Ruby Racer 所说，生成的锚标记缺少双引号 <a href="www.example.com

【讨论】：