{"id":27949,"date":"2022-03-24T20:00:17","date_gmt":"2022-03-24T20:00:17","guid":{"rendered":"http:\/\/handle-image-asset-bundling-using-vite-in-reactjs"},"modified":"2025-10-16T11:48:06","modified_gmt":"2025-10-16T18:48:06","slug":"handle-image-asset-bundling-using-vite-in-reactjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs\/","title":{"rendered":"Handle Image Asset Bundling using Vite in React"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Vite is a frontend toolkit providing robust features to build scalable web applications.<\/p>\n<p>In this article, you\u2019ll learn:<\/p>\n<ul>\n<li>What Vite is, and how it works.<\/li>\n<li>Setting up your Vite app.<\/li>\n<li>How to handle image asset bundling with Vite.<\/li>\n<li>Building the Vite images React gallery.<\/li>\n<\/ul>\n<p>The completed project is on Codesandbox. Check out the <a href=\"https:\/\/codesandbox.io\/s\/image-asset-bundling-react-pjw6ow\">Codesandbox<\/a> to get started quickly.<\/p>\n<\/div>\n\n<div class=\"wp-block-cloudinary-markdown \"><p><strong>GitHub URL<\/strong><\/p>\n<p><a href=\"https:\/\/github.com\/Iheanacho-ai\/handle-assets-bundling-react\">https:\/\/github.com\/Iheanacho-ai\/handle-assets-bundling-react<\/a><\/p>\n<h2>Prerequisities<\/h2>\n<p>To get the most out of this article, we require the following:<\/p>\n<ul>\n<li>A basic understanding of CSS, JavaScript and React.js<\/li>\n<li>\n<a href=\"https:\/\/nodejs.org\/en\/\">Node<\/a> and its package manager, npm. Run the command <code>node -v &amp;&amp; npm -v<\/code> to verify we have them installed, or install them from here. Alternatively, we can use another package manager, <a href=\"https:\/\/classic.yarnpkg.com\/en\/docs\/install\/#windows-stable\">Yarn<\/a>.<\/li>\n<\/ul>\n<h2>A Little Bit About Vite<\/h2>\n<p>Vite is a build tool that offers developers a faster, leaner way to work. Vite focuses on two main tasks: serving code locally during development and bundling frontend assets for production. By leveraging the browser\u2019s support for native ES modules, Vite enables instant code loading, even in large projects.<\/p>\n<p>A key feature is Hot Module Replacement, which updates only the affected modules when you make changes, avoiding a full reload. This means you see your edits reflected instantly in the browser. Combined with NPM dependency resolving and pre-bundling, Vite provides a streamlined development experience.<\/p>\n<h2>Setting Up Our Vite App<\/h2>\n<p>To create a vite app, we go to our terminal and run the command below.<\/p>\n<p><strong>NOTE: If you are on windows and using Git Bash, you might have issues with the arrows, so you should use the Powershell terminal instead.<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    npm create vite@latest\n    \n    #or\n    \n    yarn create vite\n    \n    #or \n    \n    pnpm create vite\n\n<\/code><\/pre>\n<p>Running this command will trigger a set of question prompts. Answer these questions as follow.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    Project name: &lt;name of our project&gt;\n<\/code><\/pre>\n<pre class=\"js-syntax-highlighted\"><code> Select a framework: React.js\n\n<\/code><\/pre>\n<pre class=\"js-syntax-highlighted\"><code> Select a variant: react\n\n<\/code><\/pre>\n<p>Next, we run these commands.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    cd &lt;name of our project&gt;\n    npm install\n    npm run dev\n\n<\/code><\/pre>\n<p>The browser will change to the directory containing our project with this command. To see our app, go to <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a>.<\/p>\n<h2>Building Our Image Gallery<\/h2>\n<p>Vite handles images as assets automatically, so we do not need to specify configurations for the images. Learn more on static asset handling <a href=\"https:\/\/vitejs.dev\/guide\/assets.html#static-asset-handling\">here<\/a>.<\/p>\n<p>To get started on building our image gallery, we create a new folder <code>src\/images<\/code>, that will contain all nine images in our gallery.<\/p>\n<p>To download the images we will use in our gallery from <a href=\"https:\/\/github.com\/Iheanacho-ai\/handle-assets-bundling-react\/tree\/master\/src\/images\">here<\/a>.<\/p>\n<p>After adding the images, we import them in our <code>App.jsx<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    import React from 'react'\n    import Img1 from '.\/images\/photo-1.jpg'\n    import Img2 from '.\/images\/photo-2.jpg'\n    import Img3 from '.\/images\/photo-3.jpg'\n    import Img4 from '.\/images\/photo-4.jpg'\n    import Img5 from '.\/images\/photo-5.jpg'\n    import Img6 from '.\/images\/photo-6.jpg'\n    import Img7 from '.\/images\/photo-7.jpg'\n    import Img8 from '.\/images\/photo-8.jpg'\n    import Img9 from '.\/images\/photo-9.jpg'\n    import '.\/App.css'\n\n<\/code><\/pre>\n<p>Next, we create an array of these images in our <code>App<\/code> component body.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    const images = [Img1, Img2, Img3, Img4, Img5, Img6, Img7, Img8, Img9]\n\n<\/code><\/pre>\n<p>We use the JavaScript <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">map()<\/a> function to loop over the images array and render a native html <code>img<\/code> tag for each. The source of the image is attributed to the current array value in the loop.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    {\n      images.map((image) =&gt; \n      &lt;div className='image'&gt;\n        &lt;img src={image} alt=&quot;&quot; \/&gt;\n      &lt;\/div&gt; \n      )\n    }\n\n<\/code><\/pre>\n<p>Our <code>App.jsx<\/code> file should look like this.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    import { useState } from 'react'\n    import Img1 from '.\/images\/photo-1.jpg'\n    import Img2 from '.\/images\/photo-2.jpg'\n    import Img3 from '.\/images\/photo-3.jpg'\n    import Img4 from '.\/images\/photo-4.jpg'\n    import Img5 from '.\/images\/photo-5.jpg'\n    import Img6 from '.\/images\/photo-6.jpg'\n    import Img7 from '.\/images\/photo-7.jpg'\n    import Img8 from '.\/images\/photo-8.jpg'\n    import Img9 from '.\/images\/photo-9.jpg'\n    import '.\/App.css'\n    \n    function App() {\n      const images = [Img1, Img2, Img3, Img4, Img5, Img6, Img7, Img8, Img9]\n      return (\n        &lt;div className=&quot;App&quot;&gt;\n          &lt;div className=&quot;image-container&quot;&gt;\n            {\n              images.map((image) =&gt; \n              &lt;div className='image'&gt;\n                &lt;img src={image} alt=&quot;&quot; \/&gt;\n              &lt;\/div&gt; \n              )\n            }\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      )\n    }\n    \n    export default App\n\n<\/code><\/pre>\n<p>We need to add the image gallery styles in our <code>App.css<\/code> file to top our gallery.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    .App {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n    h2{\n      text-align: center;\n    }\n    .image-container{\n      width: 80%;\n      margin-left: 10%;\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 5px;\n    }\n    .image-container div:first-child {\n      grid-column-start: 1;\n      grid-column-end: 3;\n    }\n    .image-container div:last-child {\n      grid-row-start: 2;\n      grid-row-end: 5;\n    }\n    .image{\n      width: 100%;\n      height: 300px;\n    }\n    .image img {\n      width: 100%;\n      height: 100%;\n    }\n    \n\n<\/code><\/pre>\n<p>In the code block above, we do the following:<\/p>\n<ul>\n<li>Center our gallery using CSS native <code>justify-content: center<\/code> and <code>align-items<\/code>.<\/li>\n<li>Define how many columns our gallery should have using <code>grid-template-columns: repeat(4, 1fr)<\/code>.<\/li>\n<li>We target the first and last div in the <code>image-container<\/code> and specify how many columns or rows each should take up using CSS selectors.<\/li>\n<\/ul>\n<p>With that, we have successfully created our image gallery.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2FCBF94B6E3068A9995CB48F7666085692619163D14563F3DE573C7C9EA3FD45_1645618441189_gallery.PNG\" alt=\"Image showing react vite images gallery with images of flowers, city buildings, a record player, a shopping cart, and various interior spaces\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1590\" height=\"754\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>Now that you\u2019ve seen how easy it is to handle React Vite images once your Vite app is set up and integrated. Our example of the gallery is one application for image asset bundling that shows just how much effort is saved when developing with Vite.<\/p>\n<p>Ready to do even more with images for your web content? <a href=\"https:\/\/cloudinary.com\/image-api\">Cloudinary\u2019s AI-powered Image API<\/a> adds time-saving tools for developers to enhance, optimize, and manage their images seamlessly. Get started with <a href=\"https:\/\/cloudinary.com\/users\/register_free\">Cloudinary for free<\/a> forever.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27950,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[75,134,370,175,388,246,371],"class_list":["post-27949","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-css","tag-guest-post","tag-image","tag-jamstack","tag-optimize","tag-react","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Handle Image Asset Bundling using Vite in React<\/title>\n<meta name=\"description\" content=\"Learn how to handle image asset bundling with Vite images in Reactjs. Vite provides a faster and leaner development experience for modern web projects.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Handle Image Asset Bundling using Vite in React\" \/>\n<meta property=\"og:description\" content=\"Learn how to handle image asset bundling with Vite images in Reactjs. Vite provides a faster and leaner development experience for modern web projects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-24T20:00:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-16T18:48:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925823\/Web_Assets\/blog\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"4000\" \/>\n\t<meta property=\"og:image:height\" content=\"4000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Handle Image Asset Bundling using Vite in React\",\"datePublished\":\"2022-03-24T20:00:17+00:00\",\"dateModified\":\"2025-10-16T18:48:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925823\/Web_Assets\/blog\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1.jpg?_i=AA\",\"keywords\":[\"CSS\",\"Guest Post\",\"Image\",\"JAMStack\",\"Optimize\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs\",\"name\":\"Handle Image Asset Bundling using Vite in React\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925823\/Web_Assets\/blog\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1.jpg?_i=AA\",\"datePublished\":\"2022-03-24T20:00:17+00:00\",\"dateModified\":\"2025-10-16T18:48:06+00:00\",\"description\":\"Learn how to handle image asset bundling with Vite images in Reactjs. Vite provides a faster and leaner development experience for modern web projects.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925823\/Web_Assets\/blog\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925823\/Web_Assets\/blog\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1.jpg?_i=AA\",\"width\":4000,\"height\":4000,\"caption\":\"Image showing mural made from legos representing how vite images assets can be bundled\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Handle Image Asset Bundling using Vite in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Handle Image Asset Bundling using Vite in React","description":"Learn how to handle image asset bundling with Vite images in Reactjs. Vite provides a faster and leaner development experience for modern web projects.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs","og_locale":"en_US","og_type":"article","og_title":"Handle Image Asset Bundling using Vite in React","og_description":"Learn how to handle image asset bundling with Vite images in Reactjs. Vite provides a faster and leaner development experience for modern web projects.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-24T20:00:17+00:00","article_modified_time":"2025-10-16T18:48:06+00:00","og_image":[{"width":4000,"height":4000,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925823\/Web_Assets\/blog\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs\/"},"author":{"name":"","@id":""},"headline":"Handle Image Asset Bundling using Vite in React","datePublished":"2022-03-24T20:00:17+00:00","dateModified":"2025-10-16T18:48:06+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925823\/Web_Assets\/blog\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1.jpg?_i=AA","keywords":["CSS","Guest Post","Image","JAMStack","Optimize","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs","name":"Handle Image Asset Bundling using Vite in React","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925823\/Web_Assets\/blog\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1.jpg?_i=AA","datePublished":"2022-03-24T20:00:17+00:00","dateModified":"2025-10-16T18:48:06+00:00","description":"Learn how to handle image asset bundling with Vite images in Reactjs. Vite provides a faster and leaner development experience for modern web projects.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925823\/Web_Assets\/blog\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925823\/Web_Assets\/blog\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1.jpg?_i=AA","width":4000,"height":4000,"caption":"Image showing mural made from legos representing how vite images assets can be bundled"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handle-image-asset-bundling-using-vite-in-reactjs#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Handle Image Asset Bundling using Vite in React"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925823\/Web_Assets\/blog\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1\/2587c431a868f69ee94102a4797688a82826a514-4000x4000-1_279509e7b1.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27949","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27949"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27949\/revisions"}],"predecessor-version":[{"id":38800,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27949\/revisions\/38800"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27950"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27949"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27949"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}