Всем привет. Пытаюсь вставить изображение через url();
|
1 |
import logo from 'assets/icons/common/logo.svg'; const Logo = styled.div` width: 120px; height: 24px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(${logo}); ${Media.Tablet} { width: 150px; height: 24px; } `; |
На выходе получаю следующее.
Вот сам конфиг
|
1 |
esbuild .build({ outdir: 'public', entryNames: "[name]", entryPoints: ['src/index.tsx'], bundle: true, minify: true, metafile: true, logLevel: 'info', sourcemap: 'inline', // platform: "browser", target: ['chrome67'], define: { 'process.env.NODE_ENV': '"development"', 'process.env.REACT_APP_FLAGS_CTX_APP_NAME': '""', 'process.env.REACT_APP_FLAGS_CTX_INSTANCE_ID': '""', 'process.env.REACT_APP_FLAGS_CTX_HOST': '""', 'process.env.REACT_APP_FLAGS_CTX_URL' :'""', 'process.env.REACT_APP_FLAGS_CTX_URI':'""' }, plugins: [ sassPlugin({ type: 'css-text', }), svgrPlugin(), definePlugin({ process: { env: { __DEV__: true, }, }, }), ], loader: { ".png": "dataurl", ".jpg": "file", '.js': 'jsx', ".svg": "base64", ".ttf": "file", ".node": "file", ".woff": "file", ".woff2": "file", ".data": "base64", }, }) |
Есть предложения как это лечится?
Дополнительно:
Содержание
Ответы:
У тебя там svgrPlugin(), он преобразует svg в реактовские компоненты. Попробуй убрать его из конфига
- Без него начинается красный ад в консоле
)
- Astral100498, ну значит где-то ты используешь СВГ-шки как компоненты. Тут надо определиться, как быть. Либо всегда делать их компонентами и не пытаться вставить в background, либо всегда разуметь их как картинки и не рендерить в jsx, либо какой-то промежуточный вариант, например по названию файла: если там, допустим, "fileName.image.svg", то не превращать в реакт - это можно настроить в конфиге
вообще рекомендуется всегда использовать самый первый вариант. Бонус: в картинке может быть для какого-нибудь цвета значение currentColor, и ты сможешь его задать стилями. Плюс ещё можно что-то докрутить программно.
Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.
Оставить комментарий Отменить
Ответы
- Есть ответ! к записи Как уменьшить масштаб меньше 100% в Windows 10 (22H2)
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Как называется человек, который дизайн придумает для сайта и сверстает его?
- Есть ответ! к записи Можно ли установить Яндекс.Диск на АльтЛинукс?
- Есть ответ! к записи Картинки мутные только на сафари, есть выход?
- Есть ответ! к записи Keenetic. Как настроить SSTP клиент с сертификатом?
- Есть ответ! к записи Чем заменить executor в aiogram 3?
Для того чтобы правильно настроить работу с SVG и PNG файлами при использовании EsBuild, необходимо учитывать несколько важных моментов.
1. Для работы с SVG файлами в EsBuild, вам нужно установить плагин
@esbuild-plugins/allс помощью npm:2. После установки плагина, вам нужно добавить его в конфигурацию EsBuild. Например, если вы используете файл
esbuild.config.js, то добавьте следующий код:3. Для работы с PNG файлами в EsBuild, вам нужно установить плагин
@esbuild-plugins/pngс помощью npm:4. После установки плагина, добавьте его в конфигурацию EsBuild, подобно тому, как вы добавили плагин для работы с SVG:
Теперь у вас должна быть настроена правильная работа с SVG и PNG файлами при использовании EsBuild. Не забудьте сохранить изменения в вашем проекте и пересобрать его, чтобы убедиться, что все работает корректно.