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

谁践踏了优雅 2022-05-14 20:07 847阅读 0赞

有三种解决办法：

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

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

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

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

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

![70][]

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

第三种用法如下所示：

使用：

data(){
              return {
                pic:require("../../assets/imgs/ad_1.jpg")
              
          }
    //html模板中使用
    <span><img :src="pic"/></span>
    
    //如果是多张图片，存放在数组中
    
     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模板中使用
    <span v-for="item in picArr"><img :src="item"/></span>

[70]: /images/20220515/e527d31db4be42f2bc03c3d79cb8746b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，847人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue】day03-VueCli（脚手架）

day03 一、今日目标 1.生命周期 1. 生命周期介绍 2. 生命周期的四个阶段 3. 生命周期钩子 4. 声明周期案例 2.综合案例-小黑记

布满荆棘的人生/ 2024年03月18日 00:32/ 0 赞/ 258 阅读

相关使用Vue脚手架构建项目

使用Vue脚手架构建Vue项目第一步在本机安装好Nodejs环境下载地址：[https://nodejs.org/en/download/][https_n

布满荆棘的人生/ 2023年06月15日 04:53/ 0 赞/ 101 阅读

相关基于node构建前端脚手架工具

解析vue中的build.js文件 'use strict' require('./check-versions')() process

亦凉/ 2023年03月01日 12:21/ 0 赞/ 106 阅读

相关 VUE_vue脚手架中使用scss

1、npm 安装scss，文件根目录下安装，指令如下: 三个都需要安装才可以使用 npm install node-sass --save-dev npm

左手的ㄟ右手/ 2023年02月22日 07:41/ 0 赞/ 53 阅读

相关 VUE_vue脚手架中使用axios

1、npm 安装axios，文件根目录下安装，指令如下: npm install --save-dev axios 2、在main.js中引入axios

ゞ浴缸里的玫瑰/ 2023年02月22日 05:30/ 0 赞/ 64 阅读

相关 vuecli脚手架目录介绍

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小鱼儿/ 2023年01月23日 09:59/ 0 赞/ 150 阅读

相关 vuecli脚手架配置文件说明

vuecli脚手架座右铭：越努力越幸运，越运动越健康。热爱计算机技术，热爱运动的这样一个人 -------------------- 文章目录 vuec

快来打我*/ 2022年12月23日 11:29/ 0 赞/ 376 阅读

相关使用VueCLI脚手架创建项目

\\VueCLI脚手架创建项目安装脚手架 \[VueCLI官网\] (https://cli.vuejs.org/zh/guide/installatio

素颜马尾好姑娘i/ 2022年11月21日 09:58/ 0 赞/ 549 阅读

相关 Vue.js脚手架vue-cli构建项目

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检

谁践踏了优雅/ 2022年06月05日 02:37/ 0 赞/ 323 阅读

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

有三种解决办法： 1、在模板中直接引入图片资源（如果图片比较多的话，会比较麻烦） 2、将图片资源放在static文件夹下 3、图片资源在assets文件夹下，data中必

谁践踏了优雅/ 2022年05月14日 20:07/ 0 赞/ 848 阅读