@Astral100498

EsBuild как правильно настроить svg/png?

Всем привет. Пытаюсь вставить изображение через url();
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;
  }
`;


На выходе получаю следующее.
63dcbe48b9369100483214.png

Вот сам конфиг
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",
      },
  })


Есть предложения как это лечится?
  • Вопрос задан
  • 187 просмотров
Пригласить эксперта
Ответы на вопрос 1
Alexandroppolus
@Alexandroppolus
кодир
У тебя там svgrPlugin(), он преобразует svg в реактовские компоненты. Попробуй убрать его из конфига
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы