Как решить отображение NFTShape для NFT с превью в формате SVG?

Question

[Александр]

Пишу smart-item для Decentraland
Рендеринг там делается Uniti
Сам код на TypeScript

Есть компонент NFTShape для отображения превью NFT ( https://docs.decentraland.org/creator/development-... )
Все хорошо... Хорошо если NFT-токен отдает превью в растре, например, PNG: https://opensea.io/assets/ethereum/0x06012c8cf97BE...

А вот если это NFT-токен с анимацией, например, https://opensea.io/assets/ethereum/0x495f947276749...
То превью отдается в SVG, и NFTShape его не понимает, и показывает заглушку знаком вопроса.

Это при том, что сам opensea.io через API прекрасно отдаёт URL рабочих SVG
Более того, я сейчас сижу и "руками" пишу аналог этого NFTShape, что выглядит довольно глупо.

Возможно, кто-то сталкивался с проблемой?

Answer 1

[Lapita12]

Для отображения NFT с превью в формате SVG на NFTShape можно использовать следующий подход:
1. Получить URL превью NFT с помощью API, например, от opensea.io.
2. Создать новый компонент, который будет отображать SVG-изображение. Для этого можно использовать стандартный компонент , но указать ему тип изображения "image/svg+xml". Например:

<img src="https://example.com/nft-preview.svg" alt="NFT preview" type="image/svg+xml">

3. Вставить созданный компонент внутрь NFTShape с помощью свойства "children". Например:

<NFTShape
  entityId="0x123456789abcdef"
  position={{ x: 5, y: 1, z: 5 }}
  rotation={{ x: 0, y: 45, z: 0 }}
>
  <img src="https://example.com/nft-preview.svg" alt="NFT preview" type="image/svg+xml">
</NFTShape>

4. Дополнительно можно добавить обработку ошибок при загрузке SVG-изображения и замену его на заглушку в случае ошибки.

Comments

[Александр]

Спасибо!

В конечном итоге, я сделал примерно так же, только наоборот :)
Там возникла ещё одна проблема :(
opensea.io имеет хамство отдавать видеоролики, в формате 1080 на 1080
И в результате, некоторые ролики просто вешают рендер нафик. О том, чтобы отобразить два ролика одновременно вообще разговора нет. А у мну заказчик хочет отобразить одновременно 21 NFT с видеороликами!!!
Так что я вообще отказался от NFTShape
Вместо этого написал генератор, который, автоматически готовит картинки, переупаковывает видеоролики в меньший размер и из всего этого готовит смарт-итем.

Решение не без недостатков, для смены NFT приходится менять смарт-итем в сцене, но и положительные стороны вопроса очевидны :)

[hint000]

ChatGPT detected

[Lapita12]

hint000, Кто сказал что это chatgpt, а не новая технология?)

[hint000]

Lapita12, New Bing что ли? Не, не слышал.

[Lapita12]

hint000, Не-а.
Я испытываю новую технологию помощи программистам и т.п
Но сейчас это ещё онли концепт.
Работает не плохо, но слишком похоже на chatgpt тут согласен.
Ответы которые я сделал сегодня, уже намного лучше.

[hint000]

Lapita12,

Ответы которые я сделал сегодня, уже намного лучше.

На мой взгляд разницы не заметно. В новых ответах всё так же торчат уши ChatGPT (или его клона, не принципиально).

[Lapita12]

hint000, Я учту вашу критику.
В любом случае спасибо, но писать над каждым моим ответом chatgpt detected было лишним)

[Александр]

Будете смеяться, чатГПТ я тоже пробовал.

[Lapita12]

Александр, Это не Chatgpt и даже не пытайтесь мне это доказать.
Лично мне лучше знать, и я не использую это средство везде.
А этот аккаунт создан с целью тестов.