请问vue怎么添加图片

vue添加图片的方法如下：

1、打开Vue，点击左下角“+”选项；

2、然后在出现的页面里点击左上角“视频”按钮，就可以去其他文件夹里选择照片进行添加编辑了。

VUE是iOS和Android平台上的一款手机视频拍摄与美化工具，允许用户通过简单的 *** 作实现视频的拍摄、导入视频的剪辑、表现力的细调、改变滤镜、加贴纸和背景音乐等功能，轻松在手机上拍出电影大片的质感，实时记录与分享生活。

2018年7月5日，VUE正式上线2.0版本，推出短视频社区功能。随着手机摄像头的发展，越来越多的人开始使用手机拍照和摄像。摄像一般来说要比拍照门槛高，但是视频传播的信息量又远大于照片。VUE就诞生在这样的背景下，希望用拍照一样简单的 *** 作，帮助用户在手机上拍摄精美的短视频。

1、img标签src属性：

2、背景图片引入：

background-image: url(' ')

url中可以是相对路径，也可以通过src别名@找到图片路径

一、问题引入

像这种直接写死的没有出现什么问题。

但肯定是要改为父组件传值url过来属性绑定来设置的（毕竟是个组件，写死这组件的复用性就太差了）。此时看了一下运行项目后此图片的路径。

webpack编译后的图片文件夹 img 会直接在根目录，图片的上层目录 sys-head 也被忽略了，图片为了避免重复会默认重名了一个名字（vue-cli3搭建的工程）。

图片url也是相对路径写法：

子组件接收后设置图片url：

感觉没什么问题的运行后，图片没有显示：

二、解决方法

1、通过import的方法将图片源路径引入

这也是我这次重构遇到这个问题用的方法。

通过import的方法将图片源路径引入，这里使用相对路径。（打包编译会形参最终路径）

路径直接为引入的此图片（经测试，也可以是数组）。

然后子组件可直接根据此值设置图片 src 。

运行正常：

2、直接将你的图片源文件放在项目目录的 static 文件夹里

原项目用了这种解决方法。（看到了这张图片被放在了 static 文件夹中）

项目中创建 static 文件夹，把图片放入，即可以根据此路径引入。

原来vue-cli2搭建的项目可以使用这种，现在vue-cli3发现他也会把static做打包转化，这种方法使用不了。

3、使用require引入图片

也可以。但是要注意：require后面只能是字符串而不能是变量，所有动态路径无法实现。

---