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

Asked 2 years ago, Updated 2 years ago, 108 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

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

980 In Java servlet, when SHA-256 sends WW-Authenticate header for digest authentication, the client does not return the result.

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

547 Who developed the "avformat-59.dll" that comes with FFmpeg?

546 Understanding How to Configure Google API Key

© 2024 OneMinuteCode. All rights reserved.