React is a simple yet powerful UI library developed by Facebook. React has quickly taken over as one of the top frameworks for developing front-end web content today. With any client-side libraries, there is often a lot of JavaScript from the React core library and other libraries required to run your application.

Because of this, developers often use a tool like Webpack for bundling, transforming, and packaging your code for production.

Handling Image Content

An essential part of that process is deciding how to handle your image content. Usually in React you will import your images into your component and reference the relative link in the image tag. In Webpack, you will quickly learn about how loaders can be configured to handle different types of assets on your site, whether it’s your JavaScript, CSS, or image assets. The File Loader is commonly used to resolve your imported images on a file into a URL and emits the file into the output directory.

Using a CDN for Image Content Delivery

Using an image CDN to serve your image content is a smart way to ensure that images are delivered fast, in the appropriate size, and while saving bandwidth. In the event you want to deliver your image content or other content through a CDN like ImageEngine you can explicitly declare the publicPath of your image content so it references an alternative URL instead of your site’s domain. This makes it very easy to implement the ImageEngine image CDN by configuring the ImageEngine domain name in the publicPath.

Once this is configured all you have to do is declare in the file-loader the publicPath like so and ImageEngine will automatically pull your image content into the service and deliver the perfectly optimized image content to your end user. Here is the sample code snippet to add to your webpack.config.js file:

{

 test: /\.(jpe?g|png|gif|svg)$/i,

 use: [

{

  loader: 'file-loader',pull-based

  options:

           {

             publicPath: 'https://images.mysite.com/'

           }

 }

]

}

When you run your WebPack build you will see that the image URL is properly referencing the ImageEngine domain from the publicPath. Keep in mind that if you are using this in a local environment that the image will appear broken unless the image is available on a publicly accessible staging or production server. This is true for any pull-based CDN. Based on this, we recommend this configuration for staging or production.

How to Gain Granular Control over Image Content Delivery

ImageEngine is a powerful tool when it comes to optimizing your image content for every device, but sometimes you will want more granular control over how the image is presented. ImageEngine directives are a fantastic way to manipulate your image content on the fly without having to modify the source image.

Using a template string in a JSX expression is a great way to declare ImageEngine directives. Simply add the query string to the end of the image URL with the desired settings like so:

<img src={`${logo}?imgeng=/f_webp/w_300/`} alt="Logo" >

Learn more about how you can manipulate your images in our ImageEngine Documentation.

React and Webpack are powerful tools that enable developers to create incredible applications. ImageEngine can be a useful tool in simplifying your image management workflow and can greatly improve the performance of your site, especially if there is a lot of image content.

If you have any questions or concerns about getting started with ImageEngine in your React Application, you can always use our free resources such as our ImageEngine Getting Started Guide.