Путь src к файлам в ds_res

Frontend разработчик
1

Добрый день
Хочу использовать в компоненте дэшлета иконки из ds_res, и прочие ассеты. Как указать к ним путь в атрибуте src?

2

Для всех, кто будет смотреть после, искомый путь выглядит, как

src="res:ds_res_:assets..."

Но CORS не пускает их загрузить

3

Добрый день!

Просьба написать куда вы планируете вставлять картинки из раздела ds_res ?
Как пример, для вставки отдельной картинки можно использовать: url: ‘res:round.png’,
Или же для вставки фона для дэша: “bgImage”: “res:round.png”

4

Я хочу использовать кастомные ассеты в моем компоненте, с использованием react-svg, к примеру

5

Коректный путь до любого ресурса (в данном случае до ресурса датасета “ds_res”):

/srv/resources/ds_res/название_файла_с_расширением

Я полагаю, что для работы над своим кастомным компонентом вы используете форк от этого проекта GitHub - luxms/bi-magic-resources

Если так, то вы можете импортировать компонент SVGIcon из модуля bi-internal/ui :

import SVGIcon from "bi-internal/ui";

и использовать аналогично тому, что хотите использовать вы, например так:


import {AppConfig} from '@luxms/bi-core';
import SVGIcon from "bi-internal/ui";

// ...тут прочий код  и в том числе код вашего компонента

<SVGIcon key="ds-svg-sprite" className="SVGSprite" data-key="ds-svg-sprite"
                 style={{position: 'absolute', display: 'none'}}
                 path={AppConfig.fixRequestUrl(`/srv/resources/ds_res/office.svg?ts=${тут рандомный хеш, нужный для того, чтобы браузер не кешировал файл, может быть любой рандомайзер}`)}/>}

Но вообще для React можно использовать отдельный компонент, например назвать его** Icons.tsx**, который можно поместить в ds_res папку, и в этом компоненте иконки указаны как экспортируемые реакт-компоненты.
Например:

export const Office = () =>
<svg viewBox="64 64 896 896" focusable="false" className="" data-icon="check-circle" width="1em" height="1em" fill="#52c41a" aria-hidden="true">
  <path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path>
  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
</svg>;

У себя в компоненте вы используете:

import {Office} from './Icons';

После вызывать это:

<Office/>

Это сведет работу с иконками к одному файлу, нативно дружелюбному к React.
Выбирайте тот способ, который вам более удобен.

6

Спасибо.
А где можно посмотреть, какие вообще сервисы есть под капотом у luxms?

7

По описаниям модулей bi-internal предлагаю почитать на GitHub, там же находится описание и bi-magic-resources.