# (Help)Motoko Syntax for http\_request serving Jpeg Image **URL:** \ **Category:** Language Support\ **Created:** [September 23, 2022, 8:56am UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601 "2022-09-23T08:56:36Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![h1teshtr1path1](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/h1teshtr1path1/32/24662_2.png) [@h1teshtr1path1](https://forum.dfinity.org/u/h1teshtr1path1)\ **Post date:** [September 23, 2022, 8:56am UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601/1 "2022-09-23T08:56:36Z")
Hello, I want to serve dynamic images via http request, but I think I am not getting right syntax for http\_response and there is no motoko example also for serving assets. ```auto if(path == "/image.png") { return { body = imageBlob; headers = [("Content-Type", "image/jpeg")]; status_code = 200; }; }; ``` ![Screenshot 2022-09-23 at 2.23.53 PM](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/2X/0/02f0eed7b962834e99b01e7627a66c9401608601.jpeg) getting this as response. Although when i change header to = or text/html, I am getting right imageBlob as response. Please provide some motoko example for this or help me with syntax. ---
**Author:** ![cryptoschindler](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/cryptoschindler/32/26_2.png) [@cryptoschindler](https://forum.dfinity.org/u/cryptoschindler)\ **Post date:** [September 23, 2022, 11:48am UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601/2 "2022-09-23T11:48:14Z")
Shouldn鈥檛 the content type be `image/png`? ---
**Author:** ![claudio](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/claudio/32/322_2.png) [@claudio](https://forum.dfinity.org/u/claudio)\ **Post date:** [September 23, 2022, 12:24pm UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601/3 "2022-09-23T12:24:55Z")
There is an example here, but not for images per se: > **[examples/motoko/http\_counter at master 路 dfinity/examples](https://github.com/dfinity/examples/tree/master/motoko/http_counter/)** > > master/motoko/http\_counter/ ---
**Author:** ![h1teshtr1path1](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/h1teshtr1path1/32/24662_2.png) [@h1teshtr1path1](https://forum.dfinity.org/u/h1teshtr1path1)\ **Post date:** [September 23, 2022, 5:18pm UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601/4 "2022-09-23T17:18:27Z")
Actually thats just path, I used as example, ImageBlob is jpeg in real. ---
**Author:** ![h1teshtr1path1](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/h1teshtr1path1/32/24662_2.png) [@h1teshtr1path1](https://forum.dfinity.org/u/h1teshtr1path1)\ **Post date:** [September 23, 2022, 5:25pm UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601/5 "2022-09-23T17:25:18Z")
```auto public query func http_request(req: HttpRequest): async (HttpResponse) { let path = removeQuery(req.url); var temp : Blob = Text.encodeUtf8(""); var imageBlob : Blob = Option.get(Trie.find(containerFile, keyT("/image"), Text.equal), temp); if(path == "/image") { return { body = imageBlob; headers = [("Content-Type", "image/jpeg")]; status_code = 200; }; }; return { body = Text.encodeUtf8("404 Not found :"); headers = []; status_code = 404; }; }; ``` this above sample code is delivering above white picture with black bg, however if i change Header to Text html, its delivering correct Image Blob. I dont know what is wrong. Must be some syntax error or else. ---
**Author:** ![peterparker](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@peterparker](https://forum.dfinity.org/u/peterparker)\ **Post date:** [September 23, 2022, 5:36pm UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601/6 "2022-09-23T17:36:19Z")
I compared the header of the url you provided with those of Papyrs but did not notice any difference beside `accept-ranges: bytes` which I set because I stream the response but it is not your case, so not sure where the issue is. As an experiment, if you return the blob without `http_request` - from a query endpoint - and then save the outcome, it鈥檚 a valid image? i.e. 100% that the image is encoded correctly in the canister? Otherwise, your project is open source or do you have a sample repo? ---
**Author:** ![peterparker](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@peterparker](https://forum.dfinity.org/u/peterparker)\ **Post date:** [September 23, 2022, 6:02pm UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601/8 "2022-09-23T18:02:07Z")
I also opened your url in my browser (馃槈) but like I said above, beside the particular header did not notice any difference. ![Capture d鈥檈虂cran 2022-09-23 a虁 20.01.47](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/2X/3/34cc8646d2cde6d8317cd32bdff81befbeb3aa8b.jpeg) Indeed chrome preview the image as broken when I try `https://c6hao-fyaaa-aaaak-aatpq-cai.raw.ic0.app/civol`. Cannot tell more from my side without a sample repo I have to say, sorry ---
**Author:** ![h1teshtr1path1](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/h1teshtr1path1/32/24662_2.png) [@h1teshtr1path1](https://forum.dfinity.org/u/h1teshtr1path1)\ **Post date:** [September 23, 2022, 8:13pm UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601/9 "2022-09-23T20:13:06Z")
Thanks for helping. I dropped plan of using content type image/jpeg. There is surely some problem with content type image/jpeg. So I used html to serve image. ---
**Author:** ![peterparker](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@peterparker](https://forum.dfinity.org/u/peterparker)\ **Post date:** [September 24, 2022, 6:41am UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601/10 "2022-09-24T06:41:14Z")
There is no issue with content type image/jpeg on the IC. e.g. my [profile picture](https://6zvwc-sqaaa-aaaal-aalma-cai.raw.ic0.app/avatars/img_6365-copie.jpg?token=4VBF_3mvePMVgjvyD05PD) on my [blog](https://6zvwc-sqaaa-aaaal-aalma-cai.raw.ic0.app/) is a jpeg. ---
**Author:** ![h1teshtr1path1](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/h1teshtr1path1/32/24662_2.png) [@h1teshtr1path1](https://forum.dfinity.org/u/h1teshtr1path1)\ **Post date:** [September 24, 2022, 7:19am UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601/11 "2022-09-24T07:19:49Z")
Hey, thanks for clearing this up. I might be missing something. Can you please some sample code or example from your repo, or your repo if its open source? ---
**Author:** ![peterparker](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@peterparker](https://forum.dfinity.org/u/peterparker)\ **Post date:** [September 24, 2022, 7:31am UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601/12 "2022-09-24T07:31:39Z")
Sure, this my custom assets canister: [ic/canisters/src/storage at main 路 papyrs/ic 路 GitHub](https://github.com/papyrs/ic/tree/main/canisters/src/storage) Another repo in Motoko for custom assets canister which I find really interesting is the one of Aviate-labs: [GitHub - aviate-labs/asset-storage.mo: Interface of the Asset Storage Canister](https://github.com/aviate-labs/asset-storage.mo) Note: both above example stream the response (to support assets \> 1.x mb), which you don鈥檛. Don鈥檛 think it is linked to your issue but just fyi ---
**Author:** ![karim](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/karim/32/4680_2.png) [@karim](https://forum.dfinity.org/u/karim)\ **Post date:** [September 25, 2022, 9:29am UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601/13 "2022-09-25T09:29:49Z")
Out of curiosity: How does the canister know how to make sense of `request.url` (resolve a URL) when `HttpRequest` is a custom type? I鈥檝e looked at a couple of examples and tried to implement a very simplified `http_request` method that works in Candid but gives me `Failed to fetch response: Error: Not a record type` when I call the url `https:///ic0.app/funfun`: ```auto type HttpRequest = { method: Text; url: Text; headers: [(Text, Text)]; // body: Blob; }; type HttpResponse = { statusCode: Nat; headers: [(Text, Text)]; // i.e. [("content-type", "image/png")] body: Blob; // This will be type Blob for an image }; public query func http_request(request: HttpRequest) : async ?HttpResponse { switch (request.method, request.url) { case ("GET", "/funfun") { let response : HttpResponse = { statusCode = 200; headers = [("content-type", "text/plain")]; body = Text.encodeUtf8("lorem ipsum dolor sit amet"); }; return ?response; }; case _ { let response : HttpResponse = { statusCode = 400; headers = []; body = ""; }; return ?response; }; }; }; ``` Judging by the examples, shouldn鈥檛 this work as well? I.e. I鈥檓 thinking: If `request.url` is just a parameter of type Text passed to a query function, how does the canister know it鈥檚 supposed to resolve to `https://.ic0.app/PARAMETER_OF_QUERY_FUNCTION`? ---
**Author:** ![h1teshtr1path1](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/h1teshtr1path1/32/24662_2.png) [@h1teshtr1path1](https://forum.dfinity.org/u/h1teshtr1path1)\ **Post date:** [September 26, 2022, 10:43am UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601/14 "2022-09-26T10:43:47Z")
Hey, What format you use to store your images ? (Just conforming), I am converting jpeg to base64 using online tool, then encoding it to Blob for Http request. Did you done same in above Blog ? I can see that you store them as [Nat8], what tool do you use for conversion of jpeg? ---
**Author:** ![peterparker](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@peterparker](https://forum.dfinity.org/u/peterparker)\ **Post date:** [September 26, 2022, 10:59am UTC](https://forum.dfinity.org/t/help-motoko-syntax-for-http-request-serving-jpeg-image/15601/15 "2022-09-26T10:59:06Z")
You can probably use `[Nat8]` or `Blob`. I do not use any tool to convert the images. Just JavaScript conversion, transforming the images / Blob to chunks and then each chunk to array e.g. [ic/storage.api.ts at 85aa48f59b4af6cf8ff52e01f147542412090bb7 路 papyrs/ic 路 GitHub](https://github.com/papyrs/ic/blob/85aa48f59b4af6cf8ff52e01f147542412090bb7/providers/ic/src/api/storage.api.ts#L86)