Блог

Главная - Вопросы по программированию - Добавить изображение в материал-карточка пользовательского интерфейса без пути

Добавить изображение в материал-карточка пользовательского интерфейса без пути

#javascript #material-ui

#javascript #материал-пользовательский интерфейс

Вопрос:

Я хочу добавить изображение в компонент CardMedia, но в настоящее время оно у меня в виде строки base64, что-то вроде этого:

iVBORw0KGgoAAAANSUhEUgAAASwAAACoCAMAAABg99fBOxrQANHibkS1KoplYAFHgUGz85g6Ggnn2ysaMXSlccHislKRm7uI10eB9piJYuPjE3epRveUuwrTNidn9ad2ZMZFxNfoOJjTsOGESjp…

Итак, я попытался преобразовать строку в большой двоичный объект / файл, но после этого, как мне прикрепить изображение к CardMedia? кажется, он ожидает путь к изображению

некоторые реквизиты CardMedia

Комментарии:

1. может createObjectURL помочь?

Ответ №1:

Укажите, что содержимое закодировано в base64. Я использовал svg в примере, просто обновите свой MIME-тип по мере необходимости, например, image/png 

 const { Card, CardMedia } = MaterialUI;
    
ReactDOM.render(
  <Card>
    <CardMedia
      style={{ height: 100, width: 100 }}
      image="data:image/svg xml;base64,PHN2ZyBjbGFzcz0iTXVpU3ZnSWNvbi1yb290IiBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiID48cGF0aCBkPSJNMTUgM2wyLjMgMi4zLTIuODkgMi44NyAxLjQyIDEuNDJMMTguNyA2LjcgMjEgOVYzaC02ek0zIDlsMi4zLTIuMyAyLjg3IDIuODkgMS40Mi0xLjQyTDYuNyA1LjMgOSAzSDN2NnptNiAxMmwtMi4zLTIuMyAyLjg5LTIuODctMS40Mi0xLjQyTDUuMyAxNy4zIDMgMTV2Nmg2em0xMi02bC0yLjMgMi4zLTIuODctMi44OS0xLjQyIDEuNDIgMi44OSAyLjg3TDE1IDIxaDZ2LTZ6Ij48L3BhdGg PC9zdmc "
    />
    <CardMedia
      component={() => (
        <img
          alt="test"
          src="data:image/svg xml;base64,PHN2ZyBjbGFzcz0iTXVpU3ZnSWNvbi1yb290IiBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiID48cGF0aCBkPSJNMTUgM2wyLjMgMi4zLTIuODkgMi44NyAxLjQyIDEuNDJMMTguNyA2LjcgMjEgOVYzaC02ek0zIDlsMi4zLTIuMyAyLjg3IDIuODkgMS40Mi0xLjQyTDYuNyA1LjMgOSAzSDN2NnptNiAxMmwtMi4zLTIuMyAyLjg5LTIuODctMS40Mi0xLjQyTDUuMyAxNy4zIDMgMTV2Nmg2em0xMi02bC0yLjMgMi4zLTIuODctMi44OS0xLjQyIDEuNDIgMi44OSAyLjg3TDE1IDIxaDZ2LTZ6Ij48L3BhdGg PC9zdmc "
        />
      )}
    />
  </Card>, 
  document.getElementById("root") 
);  
 <body>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <div id="root"></div>
</body>