Images are not showing in the spree based rails app

Question

I am a noob with Spree. I have set up a spree app with sample data, now after uploading the images for a product from Admin, the images are still not showing in the frontend. Also getting lots of

TypeError (no implicit conversion to float from string):
  
ruby-vips (2.0.17) lib/vips/gvalue.rb:106:in `g_value_set_double'
ruby-vips (2.0.17) lib/vips/gvalue.rb:106:in `set'
ruby-vips (2.0.17) lib/vips/object.rb:258:in `set'
ruby-vips (2.0.17) lib/vips/operation.rb:249:in `set'
ruby-vips (2.0.17) lib/vips/operation.rb:384:in `block in call'
ruby-vips (2.0.17) lib/vips/operation.rb:377:in `each_index'
ruby-vips (2.0.17) lib/vips/operation.rb:377:in `call'
ruby-vips (2.0.17) lib/vips/image.rb:211:in `method_missing'
image_processing (1.11.0) lib/image_processing/processor.rb:62:in `public_send'
image_processing (1.11.0) lib/image_processing/processor.rb:62:in `apply_operation'
image_processing (1.11.0) lib/image_processing/processor.rb:39:in `apply_operation'
image_processing (1.11.0) lib/image_processing/processor.rb:19:in `block in call'
image_processing (1.11.0) lib/image_processing/processor.rb:18:in `each'
image_processing (1.11.0) lib/image_processing/processor.rb:18:in `call'
image_processing (1.11.0) lib/image_processing/pipeline.rb:50:in `call_processor'
image_processing (1.11.0) lib/image_processing/pipeline.rb:28:in `block in call'
image_processing (1.11.0) lib/image_processing/pipeline.rb:64:in `create_tempfile'
image_processing (1.11.0) lib/image_processing/pipeline.rb:27:in `call'
image_processing (1.11.0) lib/image_processing/builder.rb:13:in `call!'
image_processing (1.11.0) lib/image_processing/chainable.rb:65:in `call'
activestorage (6.0.3.3) lib/active_storage/transformers/image_processing_transformer.rb:15:in `process'
activestorage (6.0.3.3) lib/active_storage/transformers/transformer.rb:25:in `transform'
activestorage (6.0.3.3) app/models/active_storage/variation.rb:52:in `block in transform'
activesupport (6.0.3.3) lib/active_support/notifications.rb:182:in `instrument'
activestorage (6.0.3.3) app/models/active_storage/variation.rb:51:in `transform'
activestorage (6.0.3.3) app/models/active_storage/variant.rb:105:in `transform'
activestorage (6.0.3.3) app/models/active_storage/variant.rb:100:in `block in process'
activestorage (6.0.3.3) lib/active_storage/downloader.rb:15:in `block in open'
activestorage (6.0.3.3) lib/active_storage/downloader.rb:24:in `open_tempfile'
activestorage (6.0.3.3) lib/active_storage/downloader.rb:12:in `open'
activestorage (6.0.3.3) lib/active_storage/service.rb:86:in `open'
activestorage (6.0.3.3) app/models/active_storage/blob.rb:219:in `open'
activestorage (6.0.3.3) app/models/active_storage/variant.rb:99:in `process'
activestorage (6.0.3.3) app/models/active_storage/variant.rb:67:in `processed'
activestorage (6.0.3.3) app/controllers/active_storage/representations_controller.rb:12:in `show'
actionpack (6.0.3.3) lib/action_controller/metal/basic_implicit_render.rb:6:in `send_action'
actionpack (6.0.3.3) lib/abstract_controller/base.rb:195:in `process_action'
actionpack (6.0.3.3) lib/action_controller/metal/rendering.rb:30:in `process_action'
actionpack (6.0.3.3) lib/abstract_controller/callbacks.rb:42:in `block in process_action'
activesupport (6.0.3.3) lib/active_support/callbacks.rb:135:in `run_callbacks'
actionpack (6.0.3.3) lib/abstract_controller/callbacks.rb:41:in `process_action'
actionpack (6.0.3.3) lib/action_controller/metal/rescue.rb:22:in `process_action'
actionpack (6.0.3.3) lib/action_controller/metal/instrumentation.rb:33:in `block in process_action'
activesupport (6.0.3.3) lib/active_support/notifications.rb:180:in `block in instrument'
activesupport (6.0.3.3) lib/active_support/notifications/instrumenter.rb:24:in `instrument'
activesupport (6.0.3.3) lib/active_support/notifications.rb:180:in `instrument'
actionpack (6.0.3.3) lib/action_controller/metal/instrumentation.rb:32:in `process_action'
actionpack (6.0.3.3) lib/action_controller/metal/params_wrapper.rb:245:in `process_action'
activerecord (6.0.3.3) lib/active_record/railties/controller_runtime.rb:27:in `process_action'
actionpack (6.0.3.3) lib/abstract_controller/base.rb:136:in `process'
actionview (6.0.3.3) lib/action_view/rendering.rb:39:in `process'
actionpack (6.0.3.3) lib/action_controller/metal.rb:190:in `dispatch'
actionpack (6.0.3.3) lib/action_controller/metal.rb:254:in `dispatch'
actionpack (6.0.3.3) lib/action_dispatch/routing/route_set.rb:50:in `dispatch'
actionpack (6.0.3.3) lib/action_dispatch/routing/route_set.rb:33:in `serve'
actionpack (6.0.3.3) lib/action_dispatch/journey/router.rb:49:in `block in serve'
actionpack (6.0.3.3) lib/action_dispatch/journey/router.rb:32:in `each'
actionpack (6.0.3.3) lib/action_dispatch/journey/router.rb:32:in `serve'
actionpack (6.0.3.3) lib/action_dispatch/routing/route_set.rb:834:in `call'
warden (1.2.9) lib/warden/manager.rb:36:in `block in call'
warden (1.2.9) lib/warden/manager.rb:34:in `catch'
warden (1.2.9) lib/warden/manager.rb:34:in `call'
rack (2.2.3) lib/rack/tempfile_reaper.rb:15:in `call'
rack (2.2.3) lib/rack/etag.rb:27:in `call'
rack (2.2.3) lib/rack/conditional_get.rb:27:in `call'
rack (2.2.3) lib/rack/head.rb:12:in `call'
actionpack (6.0.3.3) lib/action_dispatch/http/content_security_policy.rb:18:in `call'
rack (2.2.3) lib/rack/session/abstract/id.rb:266:in `context'
rack (2.2.3) lib/rack/session/abstract/id.rb:260:in `call'
actionpack (6.0.3.3) lib/action_dispatch/middleware/cookies.rb:648:in `call'
activerecord (6.0.3.3) lib/active_record/migration.rb:567:in `call'
actionpack (6.0.3.3) lib/action_dispatch/middleware/callbacks.rb:27:in `block in call'
activesupport (6.0.3.3) lib/active_support/callbacks.rb:101:in `run_callbacks'
actionpack (6.0.3.3) lib/action_dispatch/middleware/callbacks.rb:26:in `call'
actionpack (6.0.3.3) lib/action_dispatch/middleware/executor.rb:14:in `call'
actionpack (6.0.3.3) lib/action_dispatch/middleware/actionable_exceptions.rb:17:in `call'
actionpack (6.0.3.3) lib/action_dispatch/middleware/debug_exceptions.rb:32:in `call'
web-console (4.0.4) lib/web_console/middleware.rb:132:in `call_app'
web-console (4.0.4) lib/web_console/middleware.rb:28:in `block in call'
web-console (4.0.4) lib/web_console/middleware.rb:17:in `catch'
web-console (4.0.4) lib/web_console/middleware.rb:17:in `call'
actionpack (6.0.3.3) lib/action_dispatch/middleware/show_exceptions.rb:33:in `call'
railties (6.0.3.3) lib/rails/rack/logger.rb:37:in `call_app'
railties (6.0.3.3) lib/rails/rack/logger.rb:26:in `block in call'
activesupport (6.0.3.3) lib/active_support/tagged_logging.rb:80:in `block in tagged'
activesupport (6.0.3.3) lib/active_support/tagged_logging.rb:28:in `tagged'
activesupport (6.0.3.3) lib/active_support/tagged_logging.rb:80:in `tagged'
railties (6.0.3.3) lib/rails/rack/logger.rb:26:in `call'
sprockets-rails (3.2.2) lib/sprockets/rails/quiet_assets.rb:13:in `call'
actionpack (6.0.3.3) lib/action_dispatch/middleware/remote_ip.rb:81:in `call'
actionpack (6.0.3.3) lib/action_dispatch/middleware/request_id.rb:27:in `call'
rack (2.2.3) lib/rack/method_override.rb:24:in `call'
rack (2.2.3) lib/rack/runtime.rb:22:in `call'
activesupport (6.0.3.3) lib/active_support/cache/strategy/local_cache_middleware.rb:29:in `call'
actionpack (6.0.3.3) lib/action_dispatch/middleware/executor.rb:14:in `call'
actionpack (6.0.3.3) lib/action_dispatch/middleware/static.rb:126:in `call'
rack (2.2.3) lib/rack/sendfile.rb:110:in `call'
actionpack (6.0.3.3) lib/action_dispatch/middleware/host_authorization.rb:82:in `call'
webpacker (4.3.0) lib/webpacker/dev_server_proxy.rb:23:in `perform_request'
rack-proxy (0.6.5) lib/rack/proxy.rb:57:in `call'
railties (6.0.3.3) lib/rails/engine.rb:527:in `call'
puma (4.3.6) lib/puma/configuration.rb:228:in `call'
puma (4.3.6) lib/puma/server.rb:713:in `handle_request'
puma (4.3.6) lib/puma/server.rb:472:in `process_client'
puma (4.3.6) lib/puma/server.rb:328:in `block in run'
puma (4.3.6) lib/puma/thread_pool.rb:134:in `block in spawn_thread'
Completed 200 OK in 285ms (Views: 29.6ms | ActiveRecord: 42.2ms | Allocations: 51981)

Context

I have changed the taxonomies according to my need. Also, I have deleted many of the products and added the products as my need, with the images in it but while rendering the pages which have those images in it, the frontend is not showing the images. The place where the images need to be display is showing as below.

Expected Behavior

The image should be displayed properly without any error logs.

Possible Fix

I think that this is somewhere connected with the ruby-vips also, but I know by changing the method from where these images are calling will fix this issue. I need to know the place from where it is calling it or the method to change the functionality so that I can call as per my own from any decorator.

Your Environment

• Spree version- spree-4.1.9
• Rails version - 6.0.3.3

Answer 1

This is due to the use of the ruby-vips image processing library (now the Rails 7+ default).

If you are using ruby-vips (Rails 7+ default):

class User < ApplicationRecord
  has_one_attached :avatar do |attachable|
    attachable.variant :thumb, resize_to_limit: [100, nil]
  end
end

If you are using imagemajick :

class User < ApplicationRecord
  has_one_attached :avatar do |attachable|
    attachable.variant :thumb, resize: "100x100"
  end
end

See https://github.com/rails/rails/pull/43940

Answer 2

Since you are using rails v6.0.3.3 and using Active Storage for images upload. You just need to uncomment this gem from Gemfile ( which is used to generate the variant images) and try uploading the images from spree backend.

gem "image_processing", ">= 1.2"

See - https://guides.rubyonrails.org/active_storage_overview.html#amazon-s3-service

Hope this solves your problem.