图像不加载|Ruby on Rails [已关闭]

x6492ojm  于 2023-10-17  发布在  Ruby
关注(0)|答案(2)|浏览(110)

已关闭此问题为not reproducible or was caused by typos。它目前不接受回答。

此问题是由打印错误或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里,这一个是解决的方式不太可能帮助未来的读者。
上个月关门了。
Improve this question
我正在学习Ruby on Rails,并开始了我的第一个项目。我的目标是创建一个由两个图像组成的导航栏:一个横跨导航栏整个长度的全屏背景图像,以及一个位于中心的徽标图像。然而,我面临着一个问题,图像无法正确加载,相反,我看到图标显示文件名。我该如何排除故障并解决此问题?

_header.html.erb文件:

  1. <nav class="navbar_bg">
  2. <img src="<%= asset_path('navbar_bg.png') %>" class="navbar-bg" alt="Navbar Bg">
  3. <div class="navbar_logo">
  4. <img src="<%= asset_path('logo.png') %>" class="navbar-logo" alt="Navbar logo">
  5. </div>
  6. </nav>

application.css:

  1. .navbar {
  2. position: relative;
  3. }
  4. .navbar-bg {
  5. width: 100%;
  6. }
  7. .navbar-logo {
  8. position: absolute;
  9. top: 50%;
  10. left: 50%;
  11. transform: translate(-50%, -50%);
  12. width: 50px;
  13. /* Adjust the size as needed */
  14. }

application.html.erb:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <!-- Required meta tags -->
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- Bootstrap CSS -->
  8. <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  9. <title>RD</title>
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <%= csrf_meta_tags %>
  12. <%= csp_meta_tag %>
  13. <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  14. <%= javascript_importmap_tags %>
  15. </head>
  16. <body>
  17. <%= render 'home/header' %>
  18. <div class="container">
  19. <br/>
  20. <%= yield %>
  21. </div>
  22. <!-- Optional JavaScript; choose one of the two! -->
  23. <!-- Option 1: Bootstrap Bundle with Popper -->
  24. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  25. <!-- Option 2: Separate Popper and Bootstrap JS -->
  26. <!--
  27. <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  28. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  29. -->
  30. </body>
  31. </html>
kqqjbcuj

kqqjbcuj1#

您是否尝试过将<image...替换为:

  1. <%= image_tag('navbar_bg.png', class: "navbar-bg", alt: "Navbar Bg") %>

https://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html

sgtfey8w

sgtfey8w2#

我找到了一个解决方案,这是一个愚蠢的疏忽-文件名是_header.html而不是_header.html.erb
不管怎样,谢谢你的回答。

相关问题