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

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

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

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

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

Итак, мой вопрос: как я могу разрешить использовать тот же механизм для получения разрешающего URL-адреса (например, действительного для img src) в кодах и ​​боксе и использовать конфигурацию приложения create-реагировать по умолчанию?


create-react-app javascript svg codesandbox
person Christian    schedule 03.04.2020    source источник
comment
URL песочницы возвращает 404. Не могли бы вы опубликовать новый?   -  person Jackyef    schedule 13.04.2020
comment
О, извините, восстановил.   -  person Christian    schedule 13.04.2020
comment
Обратите внимание: вы можете загрузить песочницу, запустить npm install && npm start и увидеть, что он напечатает Path of svg: /static/media/my.080ef5f5.svg, который на самом деле можно загрузить в веб-пакете или производственной сборке (пока /src/img/my.svg нет в codeandbox).   -  person Christian    schedule 13.04.2020

Ответы (3)


arrow_upward
1
arrow_downward

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

person Christian    schedule 14.04.2020

arrow_upward
1
arrow_downward

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

Когда мы используем изображение .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. и надеюсь, что это можно исправить с помощью codeandbox.

person Jackyef    schedule 13.04.2020
comment
Конечно, откуда дефолт понятно. К сожалению, нельзя использовать путь, начинающийся с /src/, в отличие от пути, сгенерированного в отдельном приложении (/static/media/...), который действительно разрешается в содержимое файла. - person Christian; 13.04.2020
comment
Я обновил вопрос и песочницу, чтобы разобраться с требованиями и импортом. - person Christian; 13.04.2020
comment
@Christian А, прости меня за недоразумение. Я обновил свой ответ, но он вам, вероятно, не понравится... - person Jackyef; 14.04.2020
comment
Спасибо, что копались в этом. Синтаксис загрузчика не поддерживается при настройке приложения create-реагировать (сбой с явным сообщением о том, что он не поддерживается). Кроме того, он загружает svg в пакет, чего я хочу избежать. Кажется, мне нужно дождаться исправления для # 3825. - person Christian; 14.04.2020
comment
Странно, я мог получить рабочую песочницу с загрузчиком здесь. - person Jackyef; 14.04.2020
comment
Да, в codeandbox работает. Но не в автономной версии (скачайте zip и запустите npm install && npm start). - person Christian; 14.04.2020
comment
Несмотря на то, что ответ мне не помог, я присуждаю награду за нахождение # 3825 раньше, чем это сделала их служба поддержки :) - person Christian; 15.04.2020

arrow_upward
0
arrow_downward

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

person Thet Aung    schedule 14.04.2020