如何在图片URL中添加动态DOM ID实现Src动态渲染？

首先得提个小细节：你原来代码里用<div>标签加src属性是不对的，<div>没有这个属性，展示图片应该用<img>标签，下面的方案我都会修正这个问题。

方案一：原生JavaScript（无框架依赖） #

如果你的项目没有用前端框架或jQuery，直接用原生JS就能实现：

<!-- 存储IMDB ID的隐藏元素 -->
<div id="imdb" style="visibility: hidden;">{{movie.id}}</div>
<!-- 图片元素，先给个默认src，之后用JS替换 -->
<img id="movie-poster" src="http://img.omdbapi.com/?i=tt3896198&h=600" alt="Movie Poster">

<script>
// 1. 获取隐藏元素里的IMDB ID，注意去掉多余空格
const imdbId = document.getElementById('imdb').textContent.trim();
// 2. 获取图片元素
const posterImg = document.getElementById('movie-poster');
// 3. 拼接动态URL并设置给图片的src属性
posterImg.src = `http://img.omdbapi.com/?i=${imdbId}&h=600`;
</script>

这里用了ES6的模板字符串（反引号`）来拼接URL，写法更简洁；如果需要兼容旧浏览器，也可以用传统字符串拼接：

posterImg.src = "http://img.omdbapi.com/?i=" + imdbId + "&h=600";

方案二：jQuery实现 #

如果你的项目已经引入了jQuery，代码会更简洁：

<div id="imdb" style="visibility: hidden;">{{movie.id}}</div>
<img id="movie-poster" src="http://img.omdbapi.com/?i=tt3896198&h=600" alt="Movie Poster">

<script>
const imdbId = $('#imdb').text().trim();
$('#movie-poster').attr('src', `http://img.omdbapi.com/?i=${imdbId}&h=600`);
</script>

方案三：直接用模板引擎渲染（最优解） #

既然你已经在使用{{movie.id}}这种模板语法（看起来像是Handlebars、EJS或者Vue这类模板引擎的写法），其实完全不需要先把ID渲染到隐藏div再用JS读取——直接在<img>的src属性里插入变量就行，这是最高效的方式：

<!-- 直接在src中使用模板变量，一步到位生成动态URL -->
<img src="http://img.omdbapi.com/?i={{movie.id}}&h=600" alt="Movie Poster">

这种方式不需要额外的DOM操作和JS代码，页面渲染时就会直接生成正确的图片URL，避免了页面加载后再修改src可能出现的短暂默认图片或加载延迟问题。

内容的提问来源于stack exchange，提问作者user5236180