解决img 动态获取图片路径不生效

最近开发遇到一个问题，循坏列表动态获取img 的 src路径，图片不生效

代码是这样写的，不用循环获取图片路径，将图片路径写死成 <img src="../../assets/icons/img1.png" />，是可以的。但是只要一循坏，不论list有几条数据，图片路径获取都不生效

 <!-- 导航 -->
    <ul class="flex nav">
      <li v-for="(item, index) in list" :key="index" >
        <div>
          <img :src="item.url" />
        </div>
        <div>{{ item.title }}</div>
      </li>
    </ul>

 list: [
        { title: "文案文案", url: "../../assets/icons/img1.png"},
        { title: "文案文案", url: "../../assets/icons/img2.png"},
]

在网上找了很多方法，把list里的路径换成 @/assets/icons/img1.png不行，img 的路径换成:src="require(item.imgUrl)"也不行,最后尝试require加字符串拼接成功显示图片了，具体如下：

 

  <!-- 导航 -->
    <ul class="flex nav">
      <li v-for="(item, index) in list" :key="index"">
        <div>
          <img  :src="require('@/assets/icons/'+item.url)" />
        </div>
        <div>{{ item.title }}</div>
      </li>
    </ul>
 
<!-- data中的list格式：-->
  list: [
        { title: "文案文案", url: "img1.png"},
        { title: "文案文案", url: "img2.png"},
]

虽然是个小问题，但是也困扰我一段时间，希望能帮到跟我遇到同样问题的小可爱