

**やりたいこと**  
rails6で作ったアプリを，rails7で作り直してます．  
そのなかで，background-imageを表示したいです．

**やったこと**  
rails6で動いていたとおりに，コードを記述しました．  
事前に表示したい画像をapp/assets/imagesに入れてることを確認し，以下に添付したように記述しました．

**気になること**  
表示されないのはおかしいな？と思い，bin/rails sした後に開発者ツールでページを確認すると，以下のような表示が出ていることに気づきました．

> The resource http://localhost:3000/assets/es-module-
> shims.min-4213490297290a6ddf72ee4cafbf726e959de874.js was preloaded using
> link preload but not used within a few seconds from the window's load event.
> Please make sure it has an appropriate `as` value and it is preloaded
> intentionally.

**関連するファイル類**  
_application.html.erb_

[code]

    <!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>
    
[/code]

_home.html.erb_

[code]

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

_pages.scss_

[code]

    /* top ================================ */
    .top-main {
      padding: 200px 0 100px;
      text-align: center;
      position: absolute;
      top: 0;
      width: 100%;
      height: auto;
      min-height: 100%;
    　ここから表示されていない？？
      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: antialiased;
      margin-bottom: 20px;
      color:#FFF7EB
    }
    
[/code]

_コマンドプロンプトが吐いてた内容_

[code]

    Started GET "/assets/%3C%=%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'
    activerecord (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'
    railties (7.0.3) lib/rails/rack/logger.rb:40:in `call_app'
    railties (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'
    railties (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'
    railties (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 within layouts/application
      Rendered shared/_flashes.html.erb (Duration: 0.3ms | Allocations: 213)
      Rendered pages/home.html.erb within 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 8ms (Views: 2.4ms | ActiveRecord: 0.0ms | Allocations: 1724)
    
[/code]

自分自身で調べながら書き直していますが，rails7は色々変わっているみたいで，なかなか苦労しています．  
詳しい方がいましたら，教えていただきたいです．


CC BY-SA 4.0
2022-06-12T10:52:31.083
89355
2022-07-04T00:31:02.353
2022-07-04T00:31:02.353
3060
40091
question
ruby-on-rails ruby bootstrap scss
rails7, scssにコードを書いてもbackground-imageが表示されません．


自己回答します．以下の通り変更することで表示されました。

**変更前:**

[code]

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

**変更後:**

[code]

    background-image: url('canva.jpg');
    
[/code]


CC BY-SA 4.0
2022-07-03T14:26:11.087
89741
2022-07-04T00:29:39.870
2022-07-04T00:29:39.870
3060
40091
89355
answer