Agregar una imagen de botón de envío a un formulario de Rails

Question

Estoy creando un formulario en Rails para enviar comentarios, y quiero que el botón de enviar sea una imagen, en lugar de un botón HTML. En this bit of documentation, dice que el código es image_submit_tag, pero no puedo hacer que funcione en mi código.

Aquí es lo que estoy trabajando con:

<% form_for [@post, Comment.new], :remote => true do |f| %> 
<p> 
    <%= f.label :body, "Add a comment" %><br /> 
    Name <%= f.text_field :name %><br /> 
    Website<%= f.text_field :website %><br /> 
    Twitter<%= f.text_field :twitter %><br /> 
    <%= f.text_area :body %> 
</p> 
<div id="comment-form"> 

    <div id="comment-button"><p> 
     <%= f.image_submit_tag("comment-button.png") %></p> 
     </div> 
</div> 
<% end %> 

Gracias por la ayuda.

Answer 1

Puede hacerlo de esta manera:

ERB:

<%= f.submit "" %> 

CSS:

input[type="submit"] 
{ 
    background:url(mybutton.png); 
} 

Answer 2

de trabajo del ejemplo de Zabba una solución más accesible sería:

Vista:

<%= f.submit "Submit" %> 

CSS:

input[type="submit"] 
{ 
    background:url(mybutton.png); 
    text-indent: -9999em; 
} 

Answer 3

creo que los métodos de 'etiqueta' no se pueden llamar en el objeto constructor de la forma.

Me refiero a los métodos 'tag' del módulo ActionView :: Helpers :: FormTagHelper.

que debería funcionar si lo hace:

<div id="comment-button"><p> 
    <%= image_submit_tag("comment-button.png") %></p> 
</div> 

Answer 4

me acaba de caer sobre éste, tratando de resolver el mismo problema. Un repentino pensamiento me hizo simplemente probar algo como esto:

<%= f.submit "Comment", :type => :image, :src => "/images/comment-button.png" %> 

creará algo como esto:

<input id="comment_submit" name="commit" src="/images/comment-button.png" type="image" value="Comment" /> 

Inténtelo hacia fuera :-)

Answer 5

Sí, lo siguiente debería funcionar:

<%= image_submit_tag("comment-button.png") %></p> 

http://apidock.com/rails/ActionView/Helpers/FormTagHelper/image_submit_tag

Answer 6

Por favor, elimine el uso de la línea:

<%= f.image_submit_tag("/assets/icon-search.png") %> 

cambio en:

<%= image_submit_tag("/assets/icon-search.png") %> 

más detalles sobre image_submit_tag

Answer 7

Para carriles 3.1 y anteriores

<%= f.submit "Submit", :type => :image, :src => image_path("submit.png") %>