Bootstrap 导航栏不呈现 SVG 图像

Question

我使用了Bootstrap 5的导航栏组件代码，我想在导航栏中渲染一个robot.svg图像。但是为什么 robot.svg 文件没有在这段代码中呈现？我将 robot.svg 文件放在视图文件夹中。此代码位于 partials 文件夹的 header.esj 文件中。

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-wide, initial-scale=1">
    <title>Home Page</title>
    <style>
        body { padding-top:30px; }
      </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <style>
        .jumbotron {
            margin-left: 50px!important;
        }
    </style>

</head>

<body class="container">
<header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        
            <a class="navbar-brand" href="#">
                <img src="../robot.svg" alt="" width="50" height="30" >
              </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="/">Home </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/projects">Projects</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/services">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/contact">Contact</a>
            </li>
          </ul>
        </div>
      </nav>

    </header>

Answer 1

假设您的图像在索引文件夹中，提供的路径不正确。应该是：

<img src="./robot.svg" alt="" width="50" height="30" />

而不是

<img src="../robot.svg" alt="" width="50" height="30" />

删除多余的点，它应该可以正常工作

Answer 2

有两种方法可以做到这一点。

方法一 你已经完成的方式。请确保您的路径正确。

方法二 您可以使用 SVG 源代码代替 img scr.

举个例子。

右键单击您的 svg 图片并选择“打开方式 -> 记事本”。（如果没有现有的记事本，您必须选择“选择另一个应用程序 -> 记事本”
然后复制记事本中显示的所有代码（<?xml version="1.0" encoding="UTF-8" standalone="no"?>除外）
然后粘贴 <img> 的代码，如下例所示。

示例 - https://codepen.io/ran_nin_du/pen/abLMpGw

PS：- 使用 css 更改图像大小，如果您使用的是 React，则可以为此使用单独的组件。

希望这个回答对您有所帮助。

Bootstrap 导航栏不呈现 SVG 图像

Bootstrap Nav Bar doesn't render SVG image

html

css

navbar

bootstrap-4