图像无法加载 |Ruby on rails [已关闭]-解网

问：

这个问题是由错别字或无法再现的问题引起的。虽然类似的问题可能在这里是主题，但这个问题的解决方式不太可能帮助未来的读者。

3个月前关闭。

改进此问题

我正在学习 Ruby on Rails，并开始着手我的第一个项目。我的目标是创建一个由两个图像组成的导航栏：一个横跨导航栏整个长度的全屏背景图像，以及一个位于中心的徽标图像。但是，我遇到了图像无法正确加载的问题，相反，我看到显示文件名的图标。如何排查和解决此问题？

_header.html.erb 文件：

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

应用程序.css：

 .navbar {
    position: relative;
}
.navbar-bg {
    width: 100%;
}
.navbar-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    /* Adjust the size as needed */
}

application.html.erb：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>RD</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
  <body>

  <%= render 'home/header' %>
  <div class="container"> 
    <br/>
    <%= yield %>
  </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

HTML CSS Ruby-on-Rails Ruby

图像无法加载 |Ruby on rails [已关闭]

Images do not load | Ruby on rails [closed]

评论

评论