一般的に、画像の保存方法は 2 つあります。
1. バックエンドが完全なオンライン アドレスを送信する
リスト アイテム img は完全な画像のオンライン アドレス (https://www.xxx/img/1.jpg) であり、フロントエンドは配列をバックエンドから直接読み取ることができ、img の URL は直接レンダリングできます。
2.画像はフロントエンドに保存されます
画像がフロントエンド パブリック フォルダーに格納されている場合、パスはフロントエンド画像ストレージの相対パスであるため、バックエンド画像アドレスはパスではなく画像の名前である可能性があります。
#python
[{
"id":1,"content":"xxxx","url":"9.png"},{
},{
}]
このとき、フロント エンドはバック エンドに接続して値を渡し、パスを結合する必要があります。
スティッチングパス方法:
created(){
//1.初始化函数里：从后端获取分类的数据。
//用到axios 从后端直接获取，不用传参。用get接收即可。
this.getdata()
},
methods:{
getdata(){
var that=this;
this.$axios.get("http://127.0.0.1:8000/v3baisort/")
.then(function(data){
// 2. 由于后端图片地址不是在线的,图片存储在项目中,
// 所以后端只是图片名,需要在这里拼接一下图片路径.
for(var i = 0; i < data["data"].length; i++){
var url1=data["data"][i].url
// 1)找到放图片路径的地方 拼接后端的图片名。
var imgurl=require('../../../public/img/goods/goodssort/'+url1)
// 2)给后端数组的图片url重新赋值
data["data"][i].url=imgurl
}
// 3)把后端数据赋给本页面catelist
that.catelist=data["data"]
}).catch(function(error){
alert(error)
})
},
}
このように書くのは面倒に思えますが、もっと簡単なスプライシング方法があります。
axios を直接使用して、画像の名前を読み取ります。レンダリング時に img タグに src をバインドし、src に直接接続した方がよいのではないでしょうか?
このように考える場合は注意が必要です。img はこの動的バインディングを認識しません。
<img :src="'../../public/img'+item.url" /><br>
src バインディングは純粋な文字列に解析されます。これは axios で require() を介してのみパッケージ化でき、スプライシング後に表示されます。