#css #svg #next.js
Вопрос:
Я использую Next.js и у меня есть пара файлов SVG внутри public каталога:
/public/branding/logo.svg
/public/branding/brand.svg
/public/branding/slogan.svg
И я использую img тег, чтобы загрузить их:
<img src='/branding/logo.svg' />
Однако изображение не отображается. Но я могу щелкнуть правой кнопкой мыши по изображению src в инструментах разработки Google Chrome, открыть SVG на новой вкладке и просмотреть его содержимое.
Хотя я вижу это сообщение:
Этот XML — файл, похоже, не содержит никакой информации о стиле, связанной с ним. Дерево документов показано ниже.
Что случилось?
Комментарии:
1. похоже, что вы отсутствуете
'в конце пути src2. @ChemiAdel это была опечатка в моем вопросе. Я все исправил.
3. Можете ли вы показать нам SVG-код?
Ответ №1:
Проблема именно в этом сообщении браузера:
Этот XML — файл, похоже, не содержит никакой информации о стиле, связанной с ним. Дерево документов показано ниже.
Если nextjs не показывает ваше SVG-изображение, сначала откройте его в браузере (например, Chrome). Если он показывает вам это сообщение, значит, у SVG возникли проблемы. Замените его другим SVG, и он должен работать. Это сработало для меня.
Итак, мы можем сказать, что nextjs показывает только допустимые файлы SVG, которые может отображать браузер. Однако мне потребовалось несколько дней, чтобы решить эту проблему.