关于Vue2+webpack / Vue3 + vite动态渲染静态图片，不显示的问题。

Vue2 + webpack 动态渲染图片

使用webpack自带的require来引用静态资源。

<template>
<div>
    <img v-for="item in imgList" :key="item.key" :src="require(item.url)" />
</div>
</template>
<script>
export default {
    data(){
        return {
            imgList:[{
                key:'1',
                name:'../../assets/example1.png'
            },{
                key:'2',
                name:'../../assets/example2.png'
            },{
                key:'3',
                name:'../../assets/example3.png'
            }]
        }
    }
}
</script>

Vue3 + vite 动态渲染图片

1. 在项目的根目录下找到public；

2. public下新建一个img文件夹；

3. 把静态图片资源放到这个目录下面了；

4. 打包后，项目下的静态资源会被到dist文件下img文件夹下面。

文件目录结构如下

----public
    ---img
        ---example1.png
        ---example2.png
        ---example3.png

<template>
<div>
    <img v-for="item in imgList" :key="item.key" :src="require(item.url)" />
</div>
</template>
<script setup>
import {ref} from 'vue'
const imgList = ref([{
    key:'1',
    name:'/img/example1.png'
},{
    key:'2',
    name:'/img/example2.png'
},{
    key:'3',
    name:'/img/example3.png'
}])
</script>