在 Rails 4 中使用图像作为单选按钮标签 [英] Use an image for radio button label in Rails 4
问题描述
我正在尝试使用帮助器 collection_radio_buttons 将图像显示为标签,并希望将 image_id 保存到模型中以便我可以检索 url,到目前为止,我已经想出了显示单选按钮和image_url 作为标签.
I am trying to use the helper collection_radio_buttons to show an image as a label, and want to save the image_id to the model so that I can retrieve the url, so far I have come up with this which shows a radio button and the image_url as the label.
我已经注意到的一点是,我只能单击单选按钮一次,然后它就停留在开启状态:
Something I have noticed already is that I can only click the radio button once and it then just stays in its on state:
<%= f.collection_radio_buttons(:default_image_id, DefaultImage.all, :id, :image) %>
生成的 html 如下所示:
The html generated looks like so:
<input id="campaign_default_image_id_1" name="campaign[default_image_id]" type="radio" value="1" />
<label for="campaign_default_image_id_1">https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/1/vandals_portfolio.png</label>
如何正确设置?我可以将标签包装在 image_tag 中吗?
How do I set this up correctly? Can I wrap the label in a image_tag ?
因此,经过更多研究并尝试将其拼凑在一起,我现在可以渲染图像和单选按钮,但该图像是我使用 carrierwave 上传的默认图像,而不是我想要的调整大小的 :small 版本.:small 版本可以通过吗?
So after some more research and trying to piece this together I can now render an image and a radio button, but the image is the default image I uploaded with carrierwave and not the resized :small version that I would like. Can I pass the :small version through?
<%= f.collection_radio_buttons(:default_image_id, DefaultImage.all, :id, :image) do |b| %>
<%= b.label { image_tag("#{b.text}") + b.radio_button } %>
b.text 检索 url
b.text retrieves the url
https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/2/ymca_portfolio.png
但我希望它在文件名前加上 fancy_box_array,如下所示:
But I would like it to prefix the filename with fancy_box_array, like so:
https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/2/fancy_box_array_ymca_portfolio.png
用这个新代码生成的 html 是:
The html generated with this new code is:
<label for="campaign_default_image_id_1"><img alt="Vandals portfolio" src="https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/1/vandals_portfolio.png" />
<input id="campaign_default_image_id_1" name="campaign[default_image_id]" type="radio" value="1" /></label>
谢谢
推荐答案
有一个很好的参考 你正在尝试做什么.尝试类似:
There is a good reference on what you are trying to do. Try something like:
f.collection_radio_buttons(:default_image_id, DefaultImage.all, :id, :image) do |b|
b.label { b.radio_button + image_tag(b.object.image) }
end
这篇关于在 Rails 4 中使用图像作为单选按钮标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!