vue3 + vite 动态绑定src require is not defined

这次项目的框架是vue3 + vite

在需要动态绑定src的时候，还是按照之前常规的方法 require(‘xxxx’ + 变量)

  		<div
            :class="['tag-item', currentSystem == item.code ? 'activeTag' : '']"
            v-for="(item, index) in schoolTagsList"
            :key="index"
            @click="getCurrentTypeSchoolList(item)"
          >
            <img class="tag-icon" :src="require(`../../assets/img/${item.code}.png`)" alt="" /> 
            {
    
    {
    
     item.value}}
          </div>

控制台报错

ReferenceError: require is not defined

这是因为require 是属于Webpack的方法，vite并不支持

需要改下成如下

 		<div
            :class="['tag-item', currentSystem == item.code ? 'activeTag' : '']"
            v-for="(item, index) in schoolTagsList"
            :key="index"
            @click="getCurrentTypeSchoolList(item)"
          >
            <img class="tag-icon" :src="getImageUrl(item.code)" alt="" />
            {
    
    {
    
     item.value }}
          </div>


<script>
	export default {
    
    
		setup() {
    
    
    		const getImageUrl = (code) => {
    
    
      			return new URL(`../../../assets/img/${
      
      code}.png`, import.meta.url).href;
    		};
   			 return {
    
    
     			 getImageUrl,
   			};
  		},
	}
</script>

这样即可实现 vite下 动态绑定 src的问题