Development Book V18: Serving Static Resources

To manage static resources in a custom module, especially for displaying an image on a webpage, follow these steps:

First, add the desired image to the static directory of your custom module. For example: /store/static/src/img/image.jpg.

Next, create and configure the corresponding 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 given code example, substitute 'image_url' with the actual URL of the image you want to display. Then, access this 'image_url' within the template and use it as shown below:

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

In this scenario, the image is loaded directly from the location /store/static/src/img/image.jpg.

Odoo automatically identifies all files placed in the static folder as static assets. In this case, the image is located under /static/src/img. Similarly, you can arrange other static files in designated folders — CSS files can be kept in /static/src/css, JavaScript files in /static/src/js, and other resources can follow the same structured approach.