与carreirwave的背景图像 [英] background images with carreirwave

问题描述

我无法使用carrierwave获取正在上传的图像以显示在我正在处理的博客中。

I'm having trouble getting images I'm uploading using carrierwave to show in the blog I'm working on.

这是查看代码：

<div class="entry-header">
   <div class="entry-image" style="background: image-url(<%= image_tag @blog.image_url.to_s %>)"> </div>
   <h1 class="entry-title"><%= @blog.title %></h1>
</div>

当前正在显示）> 其中我可以通过删除image标签中的 = 使其消失，但这也不能解决问题。

Currently it's displaying )"> where the image and title should be. I'm able to make that disappear by removing the = in the image tag, but that also doesn't solve the problem.

以下是博客模型：

class Blog < ActiveRecord::Base
validates :title, presence: true, length: { minimum: 5 }
validates :body, presence: true
mount_uploader :image, BlogImageUploader
end

我对通用载波生成的上传器没有做任何更改，尽管我也可以发布，如果有帮助的话。

And I haven't made any changes tot he generic carrierwave generated uploader, though I can post that too if it's helpful. Anyone have any ideas?

根据要求，呈现的html：

As requested, the rendered html:

<div class="entry-header">
    <div class="entry-image" style="background: <img src=" uploads="" blog="" image="" 980190964="" gcentral.jpg"="" alt="Gcentral">"&gt; </div>
    <h1 class="entry-title">Grand central test</h1>
</div>

推荐答案

啊，我明白了。当您使用<％= image_tag（...）％> 时，Rails会生成< img src = ...替代项= ... foo = ... bar = ... /> 标记，用于在页面中显示常规图像。您想要的只是输出图像URL，而不是使用

Ah, I see what's going on now. When you use <%= image_tag(...) %>, Rails generates a <img src="..." alt="..." foo="..." bar="..." /> tag that is used to display a regular image in a page. What you're going to want is to just output the image URL instead with

style="background: url(<%= @blog.image_url %>)"

这将打印 url（http：//foo/bar/baz.jpg）即可。请注意，我还将图片网址更改为 url ，作为图片网址是您可以在/ app / assets / stylesheets文件下使用的东西，但在样式属性中不可用。如果您好奇的话，请查找链轮以获取更多信息。

This will print something like url(http://foo/bar/baz.jpg) like you want. Note that I also changed image-url to url, as image-url is something that you get to use under the /app/assets/stylesheets files, but isn't available in style attributes. Look up sprockets for more info if you're curious.

您可能还想在其中使用某种清理功能，因为狡猾的黑客可以上传名称为>< script> alert（'hacked！'）< /脚本> 来执行页面上的脚本。

You probably also want to use some sanitization in there, because a crafty hacker could upload an image with a name like "><script>alert('hacked!')</script> to execute scripts on your page.

这篇关于与carreirwave的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！