vue-插入图片的方法

在这里，只讲一种方法，其它的不再赘述，原理都是一样的。

首先，我们需要将要插入的图片导入到相应的路径下来，路径分为相对路径和绝对路径（建议同意放在components目录下，这样后面引用会非常方便），关于相对路径和绝对路径的相关内容自己查阅资料，这里也不太赘述。好啦，废话不多说，直接上代码。

首先，这是我项目的结构：

其次，<template>里面新建一个<div>标签，

  <div>
		<img :src="imgUrl"/>
	</div>

紧接着，在<script>标签里面添加代码（注意:只看未被注释的代码）

export default {
   /* name: "zujian",
    props: {},
    components: {
        
    }, */
    setup() {
		/* const  bianliangname = ref('1111');
		function ok(){
			bianliangname.value='2222'
			
		} */
		return {
			/* bianliangname,
			ok, */
			imgUrl:require('./lyp.jpg')
		}
	}
}

最后，编译运行一下，在浏览器中就可以看到图片被插入了。

运行结果也贴到这儿：

好啦，本期分享到此结束，下期会详细讲解父子组件数据传递的几种方式，敬请期待吧~