- 加载本地图片
需要使用ref来进行加载。 使用require引入，require里面为图片路径，一般用相对路径，注意require不能接收变量作为地址
<template>
<div class="home">
<img v-for="(item, index) in imgList" :key="index" :src="item.url" :alt="item.name">
<img :src="img" alt="vue">
</div>
</template>
<script>
// @ is an alias to /src
import { onMounted, ref } from "vue";
export default {
name: 'HomeView',
setup() {
const imgList = [
{
name: "岩井俊二",
url: "https://img9.doubanio.com/view/celebrity/raw/public/p85.jpg"
},{
name: "情书",
url: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2648230660.jpg"
}
];
// 需要使用ref 配合 require来加载本地图片
const img = ref(require('@/assets/logo.png'));
onMounted(() => {
console.log("bb");
});
return {
imgList,
img
}
},
methods: {
}
}
</script>
- 加载网络图片的时候还需要在index.html中添加meta标签
<meta name="referrer" content="no-referrer">
标签含义
