Even if I write the code on rails7,scss, the background-image is not displayed.

Asked 2 years ago, Updated 2 years ago, 117 views

What do you want to do
I'm recreating the app I made with rails6 with rails7.
Among them, I would like to display the background-image.

what someone did
I wrote the code exactly as it worked in rails6.
I confirmed that I put the image I want to display in advance in the app/assets/images and wrote it as attached below.

Curious
I thought it was strange that it didn't show up, so when I checked the page with the developer tool after bin/rails, I noticed that the following display appeared.

The resource http://localhost:3000/assets/es-module-shims.min-4213490297290a6ddf72ee4cafbf726e959de874.js was preloaded using link preload but not used in a new seconds from the window's load event. Please make as clear as it is.

Related Files
application.html.erb

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title><%=full_title(yield(:title))%></title>
    <%=render'layouts/rails_default'%>
  </head>

  <body>
    <%=render'shared/header'%>
    <%=render'shared/flashes'%>
    <main role="container">
      <%=yield%>
    </main>
  </body>
</html>

home.html.erb

<div class="main top-main">
  <div class='col-md-auto'>
    <div class="top-message">
      <h2>xxxx</h2>
    </div>
  </div>
</div>

pages.scss

/*top================================*/
.top-main{
  padding —200px0100px;
  text-align:center;
  position:absolute;
  top:0;
  width: 100%;
  height —auto;
  min-height: 100%;
　Isn't it displayed from here???
  background-image: image-url('app/assets/images/canva.jpg');
  background-size:cover;
}



.top-main h2 {
  font-size: 70px;
  font-weight —500;
  line-height: 1.3;
  - webkit-font-smoothing:antialized;
  margin-bottom —20px;
  color:#FFF7EB
}

What the command prompt was saying

Started GET"/assets/%3 C%=%20asset_path('app/assets/images/canva.jpg')%20%%3E" for::1 at 2022-06-12 16:38:37+0900

ArgumentError(invalid%-encoding(%3C%=%20asset_path('app/assets/images/canva.jpg')%20%%3E):

/home/xxxx/.rbenv/versions/3.1.2/lib/ruby/3.1.0/uri/common.rb:341:in`decode_www_form_component'
rack(2.2.3.1) lib/rack/utils.rb:54:in `unescape'
propshaft(0.6.4)lib/propshaft/server.rb:36:in`extract_path_and_digest'
propshaft(0.6.4)lib/propshaft/server.rb:9:in`call'
actionpack(7.0.3)lib/action_dispatch/routing/mapper.rb:19:in`block in<class:Constraints>'
actionpack(7.0.3)lib/action_dispatch/routing/mapper.rb:48:in `serve'
actionpack(7.0.3)lib/action_dispatch/journey/router.rb:50:in `block in serve'
actionpack(7.0.3)lib/action_dispatch/journey/router.rb:32:in `each'
actionpack(7.0.3)lib/action_dispatch/journey/router.rb:32:in `serve'
actionpack(7.0.3)lib/action_dispatch/routing/route_set.rb:852: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.1) lib/rack/tempfile_reaper.rb:15:in `call'
rack(2.2.3.1) lib/rack/etag.rb:27:in `call'
rack(2.2.3.1) lib/rack/conditional_get.rb:27:in `call'
rack(2.2.3.1) lib/rack/head.rb:12:in `call'
actionpack(7.0.3)lib/action_dispatch/http/permissions_policy.rb:38:in `call'
actionpack(7.0.3)lib/action_dispatch/http/content_security_policy.rb:36:in `call'
rack(2.2.3.1) lib/rack/session/abstract/id.rb:266:in `context'
rack(2.2.3.1) lib/rack/session/abstract/id.rb:260:in `call'
actionpack(7.0.3)lib/action_dispatch/middleware/cookies.rb:697:in `call'
activaterecord(7.0.3)lib/active_record/migration.rb:603:in`call'
actionpack(7.0.3)lib/action_dispatch/middleware/callbacks.rb:27:in `block in call'
activesupport(7.0.3)lib/active_support/callbacks.rb:99:in `run_callbacks'
actionpack(7.0.3)lib/action_dispatch/middleware/callbacks.rb:26:in `call'
actionpack(7.0.3)lib/action_dispatch/middleware/executor.rb:14:in `call'
actionpack(7.0.3)lib/action_dispatch/middleware/actionable_exceptions.rb:17:in`call'
actionpack(7.0.3)lib/action_dispatch/middleware/debug_exceptions.rb:28:in`call'
web-console(4.2.0)lib/web_console/middleware.rb:132:in`call_app'
web-console(4.2.0)lib/web_console/middleware.rb:28:in `block in call'
web-console(4.2.0)lib/web_console/middleware.rb:17:in`catch'
web-console(4.2.0)lib/web_console/middleware.rb:17:in`call'
actionpack(7.0.3)lib/action_dispatch/middleware/show_exceptions.rb:26:in `call'
rails (7.0.3) lib/rails/rack/logger.rb:40:in `call_app'
rails (7.0.3) lib/rails/rack/logger.rb:25:in `block in call'
activesupport(7.0.3)lib/active_support/tagged_logging.rb:114:in `block in tagged'
activesupport(7.0.3)lib/active_support/tagged_logging.rb:38:in `tagged'
activesupport(7.0.3)lib/active_support/tagged_logging.rb:114:in `tagged'
rails (7.0.3) lib/rails/rack/logger.rb:25:in `call'
actionpack(7.0.3)lib/action_dispatch/middleware/remote_ip.rb:93:in `call'
actionpack(7.0.3)lib/action_dispatch/middleware/request_id.rb:26:in `call'
rack(2.2.3.1) lib/rack/method_override.rb:24:in `call'
rack(2.2.3.1) lib/rack/runtime.rb:22:in `call'
activesupport(7.0.3)lib/active_support/cache/strategy/local_cache_middleware.rb:29:in`call'
actionpack(7.0.3)lib/action_dispatch/middleware/server_timing.rb:20:in`call'
actionpack(7.0.3)lib/action_dispatch/middleware/executor.rb:14:in `call'
actionpack(7.0.3)lib/action_dispatch/middleware/static.rb:23:in `call'
rack(2.2.3.1) lib/rack/sendfile.rb:110:in`call'
actionpack(7.0.3)lib/action_dispatch/middleware/host_authorization.rb:137:in`call'
rails (7.0.3) lib/rails/engine.rb:530:in `call'
puma(5.6.4)lib/puma/configuration.rb:252:in`call'
puma(5.6.4)lib/puma/request.rb:77:in `block in handle_request'
puma(5.6.4)lib/puma/thread_pool.rb:340:in `with_force_shutdown'
puma(5.6.4)lib/puma/request.rb:76:in `handle_request'
puma(5.6.4)lib/puma/server.rb:441:in`process_client'
puma(5.6.4)lib/puma/thread_pool.rb:147:in `block in spawn_thread'
Started GET"/"for::1 at 2022-06-12 16:38:39 +0900
Processing by PagesController # home as HTML
  Rendering layout layouts/application.html.erb
  Rendering pages/home.html.erb with in layouts/application
  Rendered shared/_flashes.html.erb (Duration: 0.3ms | Allocations: 213)
  Rendered pages/home.html.erb with in layouts/application (Duration: 0.5ms | Allocations: 298)
  Rendered layouts/_rails_default.html.erb (Duration: 0.4ms | Allocations:522)
  Rendered shared/_header.html.erb (Duration: 0.4ms | Allocations: 168)
  Rendered shared/_flashes.html.erb (Duration: 0.0ms | Allocations: 17)
  Rendered layout layouts/application.html.erb (Duration: 2.1ms | Allocations:1304)
Completed 200 OK in 8 ms (Views: 2.4 ms | ActiveRecord: 0.0 ms | Allocations: 1724)

I'm rewriting it myself, but rails7 seems to have changed a lot and I'm having a hard time.
If you know anything, please let me know.

ruby-on-rails ruby bootstrap scss

2022-09-30 16:42

1 Answers

I will answer myself. It was indicated by the following changes.

before change:

background-image: image-url('app/assets/images/canva.jpg');

after modification:

background-image:url('canva.jpg');

2022-09-30 16:42

If you have any answers or tips

Popular Tags
python x 4647
android x 1593
java x 1494
javascript x 1427
c x 927
c++ x 878
ruby-on-rails x 696
php x 692
python3 x 685
html x 656
Popular Questions

578 Understanding How to Configure Google API Key

572 rails db:create error: Could not find mysql2-0.5.4 in any of the sources

581 PHP ssh2_scp_send fails to send files as intended

881 /usr/bin/google-chrome:symbol lookup error:/usr/bin/google-chrome: undefined symbol:gbm_bo_get_modifier

589 Scrap text information after the "View More" button when searching in the Yahoo! News search window

© 2024 OneMinuteCode. All rights reserved.