使用单选按钮标签栏4的图像 [英] use an image for radio button label rails 4

问题描述

我试图使用助手collection_radio_buttons将图像显示为标签，并且希望将image_id保存到模型中，以便我可以检索url，到目前为止，我已经拿出了这个显示单选按钮的图标image_url作为标签

我已经注意到的一点是，我只能点击一次单选按钮，然后它只停留在开启状态

 <％= f.collection_radio_buttons（：default_image_id，DefaultImage.all，：id，：image）％> 
  

生成的html看起来像这样

 < input id =campaign_default_image_id_1name =campaign [default_image_id]type =radiovalue =1/> 
< label for =campaign_default_image_id_1> https：//calcuttatest.s3.amazonaws.com/uploads/default_image/image/1/vandals_portfolio.png< / label> 
  

我如何正确设置它？我可以将标签贴在image_tag上吗？

任何帮助表示赞赏

编辑

因此，经过一些更多的使用google搜索并试图将它拼凑在一起后，我现在可以渲染一个图像和一个单选按钮，但该图像是我用carrierwave上传的默认图像，而不是调整大小的小版本：我会通过：小版本通过？

 <％= f.collection_radio_buttons（：default_image_id，DefaultImage。 all，：id，：image）do | b | ％GT; 
<％= b.label {image_tag（＃{b.text}）+ b.radio_button}％> 
  

b.text检索url

  https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/2/ymca_portfolio.png 
  

但我希望它在fancy_box_array前加上文件名，就像这样

  https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/2/fancy_box_array_ymca_portfolio.png 
  

用这个新代码生成的html是

 < label for =campaign_default_image_id_1>> ;< img alt =Vandals portfoliosrc =https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/1/vandals_portfolio.png/> 
< input id =campaign_default_image_id_1name =campaign [default_image_id]type =radiovalue =1/>< / label> 
  

谢谢

解决方案 div>

关于你的什么，有一个很好的参考。正在努力去做。尝试如下所示：

  f.collection_radio_buttons（：default_image_id，DefaultImage.all，：id，：image）do | b | 
 b.label {b.radio_button + image_tag（b.object.image）} 
 end 
  

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) %>

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>

How do i set this up correctly? can i wrap the label in a image_tag ?

Any help appreciated

EDIT

So after some more googling 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 retrieves the url

https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/2/ymca_portfolio.png

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

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>

thanks

解决方案

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

这篇关于使用单选按钮标签栏4的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！