vue里的el-image标签怎么动态的访问本地图片

<template>
    <div>
        <h1 align="center">商品列表</h1>
        <div align="center" v-for="(data) in goodsData" :key="data.id">
            <span>{{data.imageUrl}}</span>
                 //这样可以正常读取到
            <el-image :src="require('@/assets/goods/image/01.jpg')"></el-image> 
               //这样可以读取到地址，但是会当get请求发送
            <el-image :src="require(img(data.imageUrl))"></el-image>   
                //会报错，{}内不能有.
            <el-image :src="require('@/assets/goods/image/' + {data.imageUrl})"></el-image>  
            <!-- <img :img="@/assets/goods/image/['${data.imageUrl}']'" alt="" /> -->
            <!-- <el-button size="medium" type="danger">立即抢购</el-button> -->
        </div>
    </div>
</template>

        methods: {
        img (path) {
            return '@/assets/goods/image/' + path
        }
    }

第三种情况应该这样写

<el-image :src="require('@/assets/goods/image/' + data.imageUrl)"></el-image>

或者使用计算属性

computed: {
    _data() {
      return this.goodsData.map(item => ({
        ...item,
        img_url: require('@/assets/goods/image/' + data.imageUrl)
      }))
    }
  }

使用

<div
  v-for="data in _data"
  :key="data.id"
>
  <el-image :src="data.img_url"></el-image>
</div>

 <el-image :src="require(`@/assets/goods/image/${data.imageUrl}`)"></el-image>