URL-адрес изображения не поддерживается в response-native-svg

Я работаю с библиотекой response-native-svg: https://github.com/react-native-community/react-native-svg, чтобы вырезать изображение с произвольной формой.

Это мой код:

<Svg
  height="100"
  width="100">
  <Defs>
      <ClipPath id="clip">
          <Circle cx="50%" cy="50%" r="40%"/>
      </ClipPath>
  </Defs>
  <Image
      width="100%"
      height="100%"
      href={{uri : 'http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg'}}
      clipPath="url(#clip)"/>
</Svg>

Вот пример, на который я ссылался: https://github.com/react-native-community/react-native-svg#image для части изображения (примечание: в теге SVG используется настраиваемый тег изображения native-react-svg), но он поддерживает только локальные изображения.

Я попытался копнуть глубже и обнаружил, что он использует функцию resolveAssetSource, которая, вероятно, помогает загружать только локальные изображения. Но я не мог это исправить.

Кто-нибудь знает, что можно сделать, чтобы эта работа работала?


person Ketan Malhotra    schedule 08.09.2017    source источник
comment
Это работает, когда вы пытаетесь загрузить локальный образ с помощью require('../localimage.jpg')? Я проверил   -  person bennygenel    schedule 09.09.2017
comment
Как я уже сказал, это работает для локальных изображений. Мне нужно использовать его для нелокальных изображений. Есть идеи, как это сделать?   -  person Ketan Malhotra    schedule 09.09.2017
comment
Это всего лишь идея, но возможно ли это, потому что вы указываете размер в процентах, а resolveAssetSource не работает. Можете ли вы попробовать указать фиксированную ширину и высоту с исходным uri, пожалуйста?   -  person bennygenel    schedule 09.09.2017
comment
Не работает. Ничего не показывает. Я полагаю, у него должен быть формат процентов и т. Д., Поскольку он использует свой собственный компонент RNSVGImage для его загрузки. Есть еще идеи?   -  person Ketan Malhotra    schedule 09.09.2017
comment
Если вы не получаете сообщение об ошибке и просто не можете показать изображение, вероятно, проблема связана с размером. Извините, но я больше не знаю, так как раньше я этой библиотекой не пользовался.   -  person bennygenel    schedule 09.09.2017


Ответы (1)


Недавно я опубликовал пакет response-native-remote-svg, который позволяет загружать локальные и удаленные изображения svg. Вы можете напрямую указывать на фактические файлы .svg, и вам не нужно воссоздавать svg в файле jsx. Пожалуйста, попробуйте и дайте мне знать, если у вас возникнут какие-либо проблемы.

person Shiva Nandan    schedule 13.12.2017