图片路径名动态生成

写成这样也可以

 :src="`./src/assets/ScreenLeft/btn${isShowLeft ? 'Show' : 'Hide'}.png`"

为了节省开销，这种小图标，可以用i标签

const imgUrl = ref("icon1");


  <i
      class="w-50px h-50px"
      :style="{
        backgroundImage: `url(./src/views/DataTest/VideoManage/${imgUrl}.png)`,
      }"
    ></i>

但是，这种死的路径在本地运行可以，上传到服务器上就会出错，图片路径就不好用了
原文链接

/**
 * @description: 获取assets静态资源
 * @param {string} assets文件夹下的路径
 */
export const getAssetsFile = (url) => {
  return new URL(`../assets/${url}`, import.meta.url).href
}

使用：

  <img v-show="item.isActive" :src="getAssetsFile(`ScreenBottom/activeIcon${index + 1}.svg`)" />
  <img v-show="!item.isActive" :src="getAssetsFile(`ScreenBottom/noActiveIcon${index + 1}.svg`)" />
      

  import { getAssetsFile } from '@/utils/index.js'