Development Book V17: Serving static resources

To handle static resources in a custom module, particularly displaying an image on a web page, follow these steps:

Place your preferred image in the static directory within your custom module. For instance: /store/static/src/img/image.jpg

Proceed to define a controller.

from odoo import http

@http.route(['/product], type='http', auth="user", website=True)
def product_details(self):
    product_ids = request.env['product.template'].sudo().search([]])
    image_url = '/store/static/src/img/image.jpg
   return request.render("shop.product_details_template", {product: product_ids, 'image_url': image_url})

In the provided code snippet, replace 'image_url' with the URL of your desired image. Subsequently, from the template, retrieve the 'image_url' and include it as follows:

                <div class="form-group col-12 s_website_form">
                    <img t-att-src="image_url"/>
                </div>

In this example, the image is showcased directly from /store/static/src/img/image.jpg

In Odoo, all files added within the static directory are recognized as static resources. In the provided example, our image resides within the /static/src/img directory. Similarly, various static resources can be organized within this directory:

For instance, CSS files can be included in the /static/src/css directory, while JavaScript files can reside in the /static/src/js directory, and so on.