0

やりたいこと
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

<!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: 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
}

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

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)

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

0

1 件の回答 1

1

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

変更前:

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

変更後:

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。