《Vue应用开发》课件——4.4引用静态资源.pptxVIP

引用静态资源4.4

掌握引用静态资源的方法，能够引用public和src\assets目录下的静态资源4.4引用静态资源先定一个小目标！

在组件中，有时需要引用一些静态资源，例如图片资源、CSS代码资源等。通过项目的public目录和src\assets目录都可以存放静态资源，但引用静态资源的方式不同，下面分别进行讲解。4.4引用静态资源

1.引用public目录中的静态资源public目录用于存放不可编译的静态资源文件，该目录下的文件会被复制到打包目录，该目录下的文件需要使用绝对路径访问。例如，在组件中引用public目录中的demo.png文件，示例代码如下。imgsrc=/demo.png4.4引用静态资源

演示引用public目录中静态资源的方法创建src\components\Image.vue文件。步骤1步骤24.4引用静态资源

修改src\main.js文件，切换页面中显示的组件，示例代码如下。importAppfrom./components/Image.vue步骤1步骤2演示引用public目录中静态资源的方法4.4引用静态资源

保存上述代码后，运行程序，引用public目录中的静态资源的页面效果如下图所示。4.4引用静态资源

2.引用src\assets目录中的静态资源src\assets目录用于存放可编译的静态资源文件，