odoo16 使用JS实现图片预览

前言：

该模块主要解决form视图中图片字段无法进行预览，可能是odoo底层对form视图的图片字段有特别处理，加上了编辑按钮却没有加载zoom属性，而正常zoom属性加载的话会给img加上'data-tooltip-template'和'data-tooltip-info'属性，所以通过js的方式给加载完成的img加上这两个属性，注意事项在清单文件里面的描述都写了，实力有限只能通过给原图片字段加class和使用js来进行控制望见谅。__init__.py里面是空的不用管。

模块结构：

文件内容：

image_tooltip.js：

odoo.define('tx_image_preview.image_tooltip', function (require) {
    "use strict";

    var core = require('web.core');
    $(document).on('mouseenter', '.zoomable-image-form img', function () {
        // 获取图像元素
        var $image = $(this);
        // 获取最新的图像 src
        var imageSrc = $image.attr('src');
        // 判断当前图片字段是否为空，如果为空的话系统会自动展示这个图片'/web/static/img/placeholder.png'
		if (imageSrc!='/web/static/img/placeholder.png'){
			// 给图像添加属性
            $image.attr({
                'data-tooltip-template': 'web.ImageZoomTooltip',
                'data-tooltip-info': JSON.stringify({'url': imageSrc})
            });
		}
    });
    $(document).on('mouseleave', '.zoomable-image-form img', function () {
        // 移除新增属性
        var $image = $(this);
        $image.removeAttr('data-tooltip-template data-tooltip-info');
    });
});

__manifest__.py：

# -*- coding: utf-8 -*-
{
    'name': "tx_image_preview",
    'summary': "Image Preview",
    'description': """
        1. 将目标图片字段加上class属性zoomable-image-form即可。
        2. 如果需要对预览尺寸进行调整，可给图片字段新增属性options="{"preview_image":"avatar_256"}"，
            其中的avatar_256可进行修改，可替换为avatar_128、avatar_512、avatar_1024
        3. 以上属性都是在视图中新增，对应组件为widget="image"。
    """,
    "author": '',
    "license": "AGPL-3",
    "version": "16.0.1.0.0",
    'depends': [],
    'data': [
    ],
    'assets': {
        'web.assets_backend': [
            '/tx_image_preview/static/src/js/image_tooltip.js',
        ],
    },
    'application': True
}