如何在HTML嵌套引号中输出Vue3变量？

你在style属性里使用{{ product.img }}的写法不符合Vue3的语法规范，Vue3不允许在HTML属性内部直接使用插值表达式{{ }}，需要通过**v-bind（简写为:）**来绑定动态属性值，以下是两种可行的实现方式：

方案一：对象语法绑定style #

<div v-for="product in inventory" class="col">
  <div class="card shadow-sm">
    <div 
      :style="{ backgroundImage: `url('images/${product.img}')` }"
      class="bd-placeholder-img card-img-top"
    ></div>
  </div>
</div>

通过:style绑定一个样式对象，利用模板字符串拼接变量值，让Vue正确解析product.img。

方案二：直接拼接字符串绑定style #

<div v-for="product in inventory" class="col">
  <div class="card shadow-sm">
    <div 
      :style="`background-image: url('images/${product.img}')`"
      class="bd-placeholder-img card-img-top"
    ></div>
  </div>
</div>

将整个style属性值作为模板字符串，直接嵌入变量完成拼接，同样能实现动态赋值。

注意：如果product.img本身已经是完整的图片路径（比如后端返回的完整URL），则无需额外添加images/前缀，直接使用url(${product.img})即可。

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