[Python知识库]django 调用数据库图片的路径并在html显示

1、数据库有关图片的字段为图片的存储路径（mysql varchar类型）。

? ? ? ? 【注】设置的图片存储路径为/static/media/product_pic

2、在views.py文件内编写获取数据库全部数据，以json格式返回。

# 根据id获取对应数据
def getProductById(request):
    mod = Product.objects  # 获取DProduct模型的Model操作对象
    ProductList = mod.filter(product_id=productId).values()  
    ProductList = list(ProductList)  # 转化为列表属性
    return JsonResponse({'data':ProductList})

返回的json数据：?product_pic为图片路径。

{
    "data": [
        {
            "product_id": 1,
            "product_name": "chou",
            "product_code": "V2223",
            "product_pic": "product_pic/微信图片_20210622152723_OQerddv.jpg",
            "product_purchase_price": 53,
            "product_sole_price": 2,
            "product_category": "卷纸"
        },
        {
            "product_id": 3,
            "product_name": "46656",
            "product_code": "D",
            "product_pic": "product_pic/006b0vpEgy1gqsq71xw0ng31340jkx75.gif",
            "product_purchase_price": 2,
            "product_sole_price": 2,
            "product_category": "纸碗"
        }
    ]
}

3、在urls.py文件上编写上传数据库数据的url

from django.urls import path
from product import views

urlpatterns = [
    path('/product/getProductById/',views.getProductById,name='getProductById'),# 获取全部数据
]

4、前端html内容

<div class="form-row text-center">
    // src用于接收前端ajax传输的图片路径
	<img src="" alt="" class="img-fluid img-thumbnail" id="product_pic_edit">
</div>

5、前端使用ajax获取数据

// 根据id在修改模态框上显示全部数据
function getDataById(id) {
    $.ajax({
        url: "/product/getProductById/" + id,
        type: "GET",
        success: function (result) {
            var list = result.data[0];
            console.log(list)
            $("#product_name_edit").val(list.product_name);//静态控件 获取数据方法text()
            $("#product_code_edit").text(list.product_code);//非静态控件 val()
            // document.getElementById("product_pic_edit").src="{% static 'media/"+list.product_pic+"' %}"; 不可行
            document.getElementById("product_pic_edit").src="/static/media/"+list.product_pic;
            $("#product_purchase_price_edit").text(list.product_purchase_price + "元");
            $("#product_sole_price_edit").val(list.product_sole_price);
            $("#product_category_edit").val(list.product_category_edit);
        }
    });
}

其中：document.getElementById("product_pic_edit").src="/static/media/"+list.product_pic;为获取数据库中图片的路径，然后将路径放到img组件的src中。

document.getElementById("product_pic_edit").src="/static/media/"+list.product_pic;