vue中添加图片资源的方法(使用vue-cli脚手架构建工具时)

发布时间:2023-06-30 15:00

有三种解决办法:

1、在模板中直接引入图片资源(如果图片比较多的话,会比较麻烦)

2、将图片资源放在static文件夹下

3、图片资源在assets文件夹下,data中必须用require加载,否则会当成字符串来处理

第二种,只要给图片放在static文件夹下即可:原因如下

由于组件化问题,webpake在打包以后,src目录下的assets里面存放的img图片,路径已经更换。如下图所示

vue中添加图片资源的方法(使用vue-cli脚手架构建工具时)_第1张图片

这里在使用vue-cli脚手脚构建工具,目录下会生成一个static目录,表示的是静态目录,推荐大家将img 存放在这个目录下,那么在webpack编译以后,依旧是可以获取到这个目录下的路径,这样就解决了路径不符而导致图片加载不出来的问题!当然项目中用的一般都是绝对路径,少数图片的话,这种方式挺好

第三种用法如下所示:

使用:

 data(){
          return {
            pic:require("../../assets/imgs/ad_1.jpg")
          
      }
//html模板中使用


//如果是多张图片,存放在数组中

 data(){
          return {
            picArr:[
              require("../../assets/imgs/ad_1.jpg"),
              require("../../assets/imgs/ad_2.jpg"),
              require("../../assets/imgs/ad_3.jpg"),
              require("../../assets/imgs/ad_4.jpg"),
              require("../../assets/imgs/ad_5.jpg")
            ]
          }
      }

//html模板中使用

 

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号