文章展示了如何在Vue项目中通过在index.html设置referrer策略，然后在组件中使用v-for循环动态绑定img标签的src属性，显示网络图片。图片源来自Gitee，并提供了包含多张图片的数据示例。
vue访问网络图片
在index.html页面<head>标签中添加
<meta name="referrer" content="no-referrer">
vue中img动态绑定src(网络图片https)
vue绑定img图片资源
<el-row :gutter="20">
<el-col :span="6" v-for="item in imgList" :key="item.imgNo">
<div class="grid-content bg-purple">
<img :key="item.imgNo" draggable="false" :src="(`${item.src}`)" >
</div>
</el-col>
</el-row>
src地址
imgList:[
{
imgNo:1,
src:'https://gitee.com/guo-xiaoya/images/raw/master/img/202304260905239.png',
width:40,
height:40
},
{
imgNo:2,
src:'https://gitee.com/guo-xiaoya/images/raw/master/img/202304260905239.png',
width:40,
height:40
},
{
imgNo:3,
src:'https://gitee.com/guo-xiaoya/images/raw/master/img/202304260905239.png',
width:40,
height:40
},
{
imgNo:4,
src:'https://gitee.com/guo-xiaoya/images/raw/master/img/202304260905239.png',
width:40,
height:40
},
{
imgNo:5,
src:'https://gitee.com/guo-xiaoya/images/raw/master/img/202304260905239.png',
width:40,
height:40
}
],
效果
更多
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
