diff --git a/frontend/src/components/ModalImageCors/index.js b/frontend/src/components/ModalImageCors/index.js
new file mode 100644
index 0000000..e681e8f
--- /dev/null
+++ b/frontend/src/components/ModalImageCors/index.js
@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import ModalImage from "react-modal-image";
+import api from "../../services/api";
+
+const useStyles = makeStyles(theme => ({
+ messageMedia: {
+ objectFit: "cover",
+ width: 250,
+ height: 200,
+ borderTopLeftRadius: 8,
+ borderTopRightRadius: 8,
+ borderBottomLeftRadius: 8,
+ borderBottomRightRadius: 8,
+ },
+}));
+
+const ModalImageCors = ({ imageUrl }) => {
+ const classes = useStyles();
+ const [fetching, setFetching] = useState(true);
+ const [url, setUrl] = useState("");
+
+ useEffect(() => {
+ if (!imageUrl) return;
+ const fetchImage = async () => {
+ const { data, headers } = await api.get(imageUrl, {
+ responseType: "blob",
+ });
+ const blobUrl = window.URL.createObjectURL(
+ new Blob([data], { type: headers["content-type"] })
+ );
+ setUrl(blobUrl);
+ setFetching(false);
+ };
+ fetchImage();
+ }, [imageUrl]);
+
+ return (
+
+ );
+};
+
+export default ModalImageCors;
diff --git a/frontend/src/components/Ticket/index.js b/frontend/src/components/Ticket/index.js
index 721aa43..a6f37d7 100644
--- a/frontend/src/components/Ticket/index.js
+++ b/frontend/src/components/Ticket/index.js
@@ -4,7 +4,6 @@ import { useParams, useHistory } from "react-router-dom";
import { toast } from "react-toastify";
import { isSameDay, parseISO, format } from "date-fns";
import openSocket from "socket.io-client";
-import ModalImage from "react-modal-image";
import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles";
@@ -34,6 +33,7 @@ import TicketInfo from "../TicketInfo";
import TicketActionButtons from "../TicketActionButtons";
import MessageOptionsMenu from "../MessageOptionsMenu";
+import ModalImageCors from "../ModalImageCors";
const drawerWidth = 320;
@@ -423,15 +423,7 @@ const Ticket = () => {
const checkMessageMedia = message => {
if (message.mediaType === "image") {
- return (
-
- );
+ return ;
}
if (message.mediaType === "audio") {
return (