Question

嗨，我的一个javascript文件中有以下html。

function addToInfoWindow(infoWindowContent)  
{  
    infoWindowString = '<div id="infoWindowString">'+  
    '<img src="assets/images/rails.png">'+  
    '<h2>You Clicked:</h2>'+  
    '<p>'+infoWindowContent+'</p>'+  
    '<p><a href="http://www.google.com">See more info</a></p>'+  
    '<p><a href="http://www.cnn.com">see news</a></p>'+  
    '</div>';  
    infoWindow.setContent(infoWindowString);  
}

问题是我无法让图像显示在信息窗口中。

我意识到这可能是因为rails具有某种帮助功能，可以在其网页中显示图像。但我无法找到如何调用它或它是什么。有人可以帮忙吗。

编辑 - 在以下回复后更改为以下内容：

function addToInfoWindow(infoWindowContent)  
{  
    infoWindowString = '<div class="infoWindowString">'+  
    '<img src="/Users/AM/Documents/RailsWS/cmdLineWS/Businesses/app/assets/images/rails.png">'+  
    '<h2>You Clicked:</h2>'+  
    '<p>'+infoWindowContent+'</p>'+  
    '<p><a href="http://www.google.ca">See Menus</a></p>'+  
    '<p><a href="http://www.google.ca">Upload a Menu</a></p>'+  
    '</div>';  
    infoWindow.setContent(infoWindowString);  
}

但是图片仍然没有出现:(

Answer 1

您正在使用图片的相对网址（assets/images/rails.png），因此浏览器会尝试从相对于当前网页的地址加载它。例如，如果图像位于

http://example.com/assets/images/rails.png

但你现在在

http://example.com/something/somepage.html

浏览器会尝试从

加载它

http://example.com/something/assets/images/rails.png

它会失败。

您应该使用绝对网址。

Answer 2

如果您使用带有rails资产打包的默认设置，它会在资产文件名后附加一个时间戳，这意味着只需浏览/assets/images/foo.jpg就不一定能为您提供所需内容。

获取图片代码的rails帮助只是image_tag 'example.jpg'。或者，如果您只想要网址image_url 'foo.jpg'。

对于您想要存储的任何给定图像，您可以将其附加到数据属性，例如在您可以执行的视图中：

<a id="image_link" href="#" data-image-url="<%= image_url 'foo.jpg' %>">Click to see image</a>

您可以使用

在jQuery中的任何位置获取该路径

var imageUrl = $('a#image_link').data('image-url')

rails + HTML：如何在我的网页中显示图片

2 个答案: