プロジェクトのシナリオ:
最近、インターフェイスによって取得された画像リソースが利用できないプロジェクトに遭遇しましたが、プロジェクトの実行を続行するために、それを独自のネットワーク イメージ アドレスに置き換えたいと考えました。
- インターフェースによって取得されるデータ形式:
{
"status":0,
"message":[
{
"id":1,
"url":"http://www.itcast.cn/subject/phoneweb/index.html",
"img":"http://m.itheima.com/images/slidead/mobile/20191213180241750x410.jpg"
},
{
"id":2,
"url":"http://www.itcast.cn/subject/phoneweb/index.html",
"img":"http://m.itheima.com/images/slidead/mobile/20191210154717750-410.jpg"
},
{
"id":3,
"url":"http://www.itcast.cn/subject/phoneweb/index.html",
"img":"http://m.itheima.com/images/slidead/mobile/20190327135101750x410-%E4%BC%A0%E6%99%BA%E9%BB%91%E9%A9%AC%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%B9%BB%E7%81%AF.jpg"
}
]
}
- 画像リソースを差し替えるために自分で用意したデータ形式:
imgUrlList:[
{
id:1,img_url:"https://img.pconline.com.cn/images/product/5784/578421/q.jpg"},
{
id:2,img_url:"https://img.pconline.com.cn/images/product/6012/601274/45.jpg"},
{
id:3,img_url:"https://img.pconline.com.cn/images/product/1086/1086487/0.jpg"},
{
id:4,img_url:"https://img.pconline.com.cn/images/product/6156/615692/846a19fea2cabb0e.jpg"},
{
id:5,img_url:"https://img.pconline.com.cn/images/product/5784/578421/q.jpg"},
{
id:6,img_url:"https://img.pconline.com.cn/images/product/1200/1200911/Z6-2-Z.jpg"},
{
id:7,img_url:"https://img.pconline.com.cn/images/product/5550/555050/g510-01.jpg"},
{
id:8,img_url:"https://img.pconline.com.cn/images/product/1381/1381391/sf.jpg"},
{
id:9,img_url:"https://img.pconline.com.cn/images/product/7101/710192/1-5.jpg"},
{
id:10,img_url:"https://img.pconline.com.cn/images/product/4358/435856/Deskjet1000.jpg"}
]
問題の説明
インターフェースから取得したimg_urlの値を1つずつ置き換える
解決:
// 获取推荐商品
async getHotGoodsList(){
const res = await this.$myRequest({
url:"/api/getgoods?pageindex=1"
})
// 如果status == 0 代表接口有数据返回
if(res.data.status == 0){
// 替换imgurl地址,index为了逐个替换对应下标的img_url值
res.data.message.forEach((item,index)=>{
console.log(this.imgUrlList[index].img_url)
// 给this.imgUrlList下标
item.img_url = this.imgUrlList[index].img_url
})
// 将整理好的数据保存到hotGoodsList
this.hotGoodsList = res.data.message
}
}