模板中引用图片的最佳实践 - 使用 <img> 标签和变量

在模板中引用图片，可以使用 标签，并将图片地址作为 src 属性的值，例如：

<img src='{{val.images}}' alt=''>

其中，'{{val.images}}' 是模板中的变量，需要替换成真实的图片地址。在上面的代码中，我们使用了'{{each}}' 语句遍历每个文章的封面图片，然后使用 标签引用图片。

<script type='text/html' id='tpl-users'>
           <{{each list val}}>
           <p class='headline'>{{val.title}}</p>
           <{{each cover val}}>
           <img src='{{val.images}}' alt=''>
           <{{/each}}>
           <p class='hei'>
            <span>{{val.aut_name}}</span>
            <span>{{val.pubdate}}</span>
           </p>
           <{{/each}}>
    </script>

function news(id) {
    let data = new Date()
    $.ajax({
        type: 'GET',
        url: 'http://toutiao.itheima.net/v1_0/articles?channel_id=' + id + '×tamp=' + data,
        success: function (res) {
            // 筛选数据
            const { results } = res.data;
            console.log(48, results);
            // 调用template函数
            let htmls = template('tpl-users', { list: results })
            //渲染数据到页面
            $('#title').html(htmls)
            // const { images } = results.cover;
            console.log(results[4].cover.images);
        }
    })
}