TypeScript中如何在字符串字段传入变量？动态设置背景图问题

你遇到的问题是因为"url({url})"是普通字符串，JavaScript不会解析其中的{url}变量。要实现动态替换ID生成背景图URL，有两种简单的解决方式：

方法一：使用ES6模板字符串（推荐） #

模板字符串用反引号（）包裹，变量通过${变量名}`插入，写法简洁直观：

// 这里也可以用模板字符串简化URL拼接
const url = `/lectures/${id}/thumbnail.jpg`;
...
style={{
  backgroundImage: `url(${url})`,
}}

当id为1时，会自动生成backgroundImage: "url('/lectures/1/thumbnail.jpg')"，完全符合你的需求。

方法二：传统字符串拼接 #

如果你的运行环境不支持ES6，也可以用加号拼接字符串：

var url = "/lectures/" + id + "/thumbnail.jpg";
...
style={{
  backgroundImage: "url(" + url + ")",
}}

这种方式也能正确将变量url插入到背景图的URL字符串中。

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