模板中如何引用图片 - 详细教程和示例

<p>在模板中，可以使用<code>&lt;img&gt;</code>标签来引用图片，其中<code>src</code>属性的值可以通过数据对象中对应的属性来获取，例如：<code>{{val.cover.images}}</code>。在上述代码中，模板中使用了双重循环，先遍历每个新闻的标题和作者等信息，再遍历每个新闻的封面图片信息，使用<code>&lt;img&gt;</code>标签来引用图片。在 JavaScript 代码中，通过调用<code>template</code>函数来渲染模板和数据，然后将渲染结果插入到页面中。同时，也可以在 JavaScript 代码中通过<code>results[4].cover.images</code>来获取第五个新闻的封面图片链接。</p>
<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>
<p>function news(id) {
let data = new Date()
$.ajax({
type: 'GET',
url: 'http://toutiao.itheima.net/v1_0/articles?channel_id=' + id + '&amp;timestamp=' + 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);
}
})
}</p>