Блог

Главная - Вопросы по программированию - Значок открытого символа SVG не отображается в веб-приложении Reactstrap

Значок открытого символа SVG не отображается в веб-приложении Reactstrap

#javascript #svg #reactstrap

#javascript #svg #reactstrap

Вопрос:

У меня есть веб-приложение, написанное с использованием Reactstrap. index.html Файл выглядит следующим образом:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <base href="%PUBLIC_URL%/" />
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Add the iconic SVGs here -->
    <script src="svg-injector.min.js"></script>
    <script>

        // Elements to inject
        var mySVGsToInject = document.querySelectorAll('.iconic-sprite');

        // Do the injection
        SVGInjector(mySVGsToInject);
    </script>
</head>
<body>
    <img src="open-iconic.svg" class="iconic-sprite" style="display:none;" />
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>
</html>

В одном из моих компонентов я пытаюсь вставить такой значок:

 import React from 'react';
import { Jumbotron } from 'reactstrap';

export function Home(props) {
  return (
    <div>
      <Jumbotron>
        <div className="d-flex flex-column">
          <div className="d-flex justify-content-center">
            <svg viewBox="0 0 8 8" className="glyph">
              <use xlinkHref="#chevron-bottom" />
            </svg>
          </div>
        </div>
      </Jumbotron>
    </div>
  );
}

Я использую reactstrap версии 8.9.0 и svg-инжектор версии 1.1.3, и я следую инструкциям по настройке здесь. Проблема, с которой я сталкиваюсь, заключается в том, что значок не отображается, и я получаю следующие две ошибки:

 svg-injector.min.js:1 Uncaught SyntaxError: Unexpected token '<'
(index):39 Uncaught ReferenceError: SVGInjector is not defined
    at (index):39

Что я здесь делаю не так?

Ответ №1:

В большинстве случаев, когда вы получаете сообщение об ошибке, например Uncaught SyntaxError: Unexpected token '<' , в файле, на который ссылается элемент script, может быть ошибка 404.

Вы уверены, что файл в строке 39 вашего index.html существует?

 <!-- Add the iconic SVGs here -->
<script src="svg-injector.min.js"></script>

Комментарии:

1. У меня есть пакет, в котором указан этот файл package.json , и я уверен, что он существует локально. Для справки, я следую приведенным здесь инструкциям по настройке.

2. Этой строкой <script src="svg-injector.min.js"></script> вы указываете, что svg-injector.min.js файл находится в той же папке, что и ваш index.html файл. Если его нет в той же папке, попробуйте указать к нему правильный путь. Например <script src="../assets/svgInjector/svg-injector.min.js"></script>

3. Хм, если бы я установил его через npm, как бы я это сделал?

4. Он должен быть где-то внутри node_modules папки, найдите его и используйте точный путь. должно быть что-то вроде node_modules/svg-injector/...

5. А, ладно. Тогда я попробую. Я подумал, что это будет более простой способ сделать это