Как отключить специальную обработку импорта SVG в codeandbox? - PullRequest
Новая
       64

Как отключить специальную обработку импорта SVG в codeandbox?

4 голосов
/ 03 апреля 2020

Я создал простое приложение с помощью create-реагировать на приложение. Это настраивает загрузчики веб-пакетов для файлов svg для копирования файлов и помещения файла publi c в константу. Поэтому следующий код 

import mysvg from "./img/my.svg";
console.log(mysvg)

печатает /static/media/my.svg. Это нормально.

Но при редактировании / запуске того же проекта в codesandbox он пытается прочитать файл svg (например, печатает ошибки о ReactComponent, если он не является надлежащим svg), и выполняет обработку другой. Очевидно, что вместо этого я мог бы использовать папку «publi c», но я бы хотел использовать функцию ha sh производственных сборок и т. Д. c.

Так что мой вопрос, как я могу разрешить использовать тот же механизм для получения разрешающего пути URL (например, действительный для img sr c) в codesandbox и использовать конфигурацию по умолчанию create-реагировать-приложение?

Ответы [ 3 ]

1 голос
/ 14 апреля 2020

Ответ от команды codesandbox: это известная проблема, отслеживаемая в их репозитории github .

1 голос
/ 13 апреля 2020

Я немного покопался, и я думаю, что это определенно ошибка с codeandbox.

Когда мы используем изображение .png, путь к строке выглядит следующим образом: 

path: https://uploads.codesandbox.io/uploads/user/ff71cfab-643a-41c7-8358-d13e8ce686c9/U6zD-unsplash1.png

Но когда мы используем SVG, вещи терпят неудачу.

Некоторые похожие проблемы открылись в их репозитории github: # 1664 , # 3825 .

Сопровождающий сказал, что svg-react-loader включен в шаблон CRA v2 , и вы можете импортировать их как ReactComponent, я предполагаю, что это то, о чем вы говорили изначально. Я думаю, именно это привело к тому, что svg файлы по-разному обрабатываются codeandbox.

Пока, я думаю, вы можете сделать этот хакерский обходной путь: 

import mysvg from "!raw-loader!./img/my.svg.txt";

// inside render
<span dangerouslySetInnerHTML={{ __html: mysvg }} />

песочница здесь

Вам необходимо добавить raw-loader в качестве зависимости и переименовать файл в расширение .txt, чтобы он не обрабатывался как .svg.

В долгосрочной перспективе, Я думаю, что лучшее, что мы можем сделать, - это участвовать в # 3825 и надеяться, что это можно исправить с помощью codesandbox.

0 голосов
/ 14 апреля 2020

Если вы хотите использовать изображения SVG, импортируйте их только как компоненты React, как это, import {ReactComponent as MySvg} from './img/my.svg' обычно всегда работает. Есть и другие способы, но я думаю, что это самый простой. Проверьте мое решение - myVersionOfCodesandbox

...