<el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="imgUrl" label="圖片">
        <template v-slot="scope">
          <img :src= "http://localhost:8888/image/ ' + scope.row.imgUrl" />
        </template>
      </el-table-column>
</el-table>

//tableData是從數(shù)據(jù)庫查詢得到的數(shù)據(jù)
//scopre.row.imgUrl是圖片的url地址,在這個項目中為圖片在數(shù)據(jù)庫中存儲的名字

//這個是向后端獲取數(shù)據(jù)的請求，得到數(shù)據(jù)之后將數(shù)據(jù)賦值給tableData
const initProductList=async()=>{
  const res = await axios.post("image/list",queryForm.value)
  tableData.value = res.data.orderList;
  console.log("tableData is",tableData)
  total.value = res.data.total;
}
initProductList();
//數(shù)據(jù)打印出來如下圖所示

 <img :src= "http://localhost:8888/image/ ' + scope.row.imgUrl" />

我們需要寫一個配置類，添加如下的方法
@Configuration
public class WebAppConfigurer implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {            
    registry.addResourceHandler("/image/**").addResourceLocations("file:D:\\img\\");

/*
    在這段代碼中，addResourceHandlers方法用于添加資源處理器。ResourceHandlerRegistry對象用于注冊資源處理器，并指定資源的訪問路徑和存放位置。
        /image/**對應的資源就放在D盤的img目錄下,通過這樣的配置當前端發(fā)送
http://localhost:8888/image/123.jpg時，應用程序會將請求映射到本機 D:\img\123.jpg路徑下的文件，并將文件返回給前端。
如果是Linux系統(tǒng)，則不加盤符
*/
    }
}