在vue3+ts+vite里 <div class="list-item" :style="{ 'background-image': `url('${item.imgUrl}')` }"写url会被转码，怎么办

在 Vue3 中，通过 `:style` 绑定动态样式时，如果属性值是字符串类型，Vue 会自动对其进行 XSS 防御，即将字符串中可能存在的 HTML 字符进行转义，这就导致了你的代码中的 URL 被转码了。

解决这个问题的方式是使用一个计算属性来构造样式对象，并将 URL 作为计算属性的一个属性，例如：

<template>
  <div :style="itemStyle"></div>
</template>

<script>
import { computed } from 'vue'

export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const itemStyle = computed(() => ({
      backgroundImage: `url(${props.item.imgUrl})`
    }))

    return {
      itemStyle
    }
  }
}
</script>

这样就可以避免 URL 被转码了。