vue页面如何引入public中的图片

引入Public文件夹中的图片

在Vue项目中，public文件夹用于存放不会被Webpack处理的静态资源。以下是引入public文件夹中图片的步骤：

• 直接引用：由于public文件夹中的资源不会被Webpack打包处理，可以直接使用绝对路径引用图片。例如，如果图片位于public/img/logo.png，可以在模板中这样引用：<img src="/img/logo.png">。28
• 动态引入：如果需要动态引入图片，可以使用require函数。例如，在script标签中使用const logo = require('@/img/logo.png')，然后在模板中绑定<img :src="logo">。37
• 背景图设置：对于背景图，可以在CSS中使用background-image属性，并使用require函数动态引入图片路径。例如：background-image: url(require('@/img/bg.png'))。9

总结来说，public文件夹中的图片可以通过直接引用绝对路径或使用require函数动态引入的方式在Vue页面中使用。直接引用适用于静态引用，而动态引入适用于需要根据条件或逻辑改变图片路径的场景。146