.vue文件怎么引入本地图片

.vue文件怎么引入本地图片

.vue文件引入本地图片,需要先将本地图片复制到项目的src\assets目录中,否则不能使用。然后在template标签中,使用img标签引用图片即可。

本地图片路径:

719628-20180625123752711-1712648313.png

在.vue文件中引入图片adv-1.jpg

(相关课程推荐:Vue.js教程

719628-20180625123943342-23188772.png

List.vue代码

<template>
    <img src="../../../assets/images/adv-1.jpg">
</template>

使用js传入

<template>
    <img :src="bannerImg">
</template>
<script>
export default {
   name: "ReportList",
   data () {
      return {
       bannerImg:require('../../../assets/images/adv-1.jpg')
      } 
   }
}
</script>
Image placeholder
前端答疑
未设置
  70人点赞

没有讨论,发表一下自己的看法吧

推荐文章
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

.vue文件怎么请求api

.vue文件怎么请求api1、首先我们安装axios网络请求库cdtest//进入项目根目录 npmiaxios-S//执行安装2、在需要使用请求的vue组件内,引入axios 请求示例 //引

.vue文件怎么使用组件?

.vue文件怎么使用组件?在vue中组件以.vue结尾,一个.vue文件就是一个组件。下面介绍下在组件中使用其他组件的方法。(相关课程推荐:Vue.js教程)1、首先创建一个组件MyTest.vue

.vue文件怎么写css样式

.vue文件怎么写css样式.vue文件由结构——行为——样式三部分构成,分别对应template、script、style标签,css样式就写在style标签中。一、直接在Test.vue中写css

echarts怎么引入到vue中?

准备工作:首先我们初始化一个vue项目,执行vueinitwebpackechart。接着我们进入初始化的项目下,安装echarts,npminstallecharts-S //或 cnpminsta

axios怎么引入到vue中?

Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。在vue项目之中使用axios是一个非常明智的选择,因为vue官方已经宣称不再维护vue-resource,并且推荐使

jsp怎么引入css样式?

JSP页面引入CSS样式有三种方法,且其优先级不同。具体如下:外部样式,内嵌样式,行内样式。优先级依次增高!下面给大家具体介绍一下:1、外部样式jsp可以在link标签中使用href属性引入css文件

.vue文件对代码缩进有要求吗?

.vue文件对代码缩进有要求吗?.vue文件对代码缩进没有要求,可以按照自己的喜好或者项目规定进行缩进,编译后生成的文件也相同,没有任何影响。为什么没有要求呢,这是因为一个.vue文件,自上而下,依次

.vue文件中如何写注释?

.vue文件中如何写注释?.vue文件中,每个代码块内,注释的时候,需要使用各自语言的注释语法去注释(HTML、CSS、JavaScript、Jade等)。在文件最顶部注释的时候用HTML的注释语法:

.vue文件不写js可以吗?

.vue文件不写js可以吗?.vue文件可以不写js,也可以不写css和html。也就是说一个空的vue文件也能正常使用而不报错。正常情况下,一个.vue文件结构如下: exportdefa

.vue文件中可以写less吗?

.vue文件中可以写less吗?可以写less,但是前提是安装了less和less-loader。下面就简单介绍下载.vue中使用less的方法吧。1、首先使用npm下载依赖;npminstall--

jquey怎么引用css样式

jquey怎么引用css样式jquery引用css只需要一行代码即可,通过传入一个标签,来创建link标签,传入type、href、以及rel给link标签添加属性,最后再调用appendTo方法,将

Python中的File文件操作笔记

Python中的File(文件)操作 针对磁盘中的文件的读写。文件I/OI输入(input)O输出(Output) 文件操作步骤:1.打开文件2.读写文件3.关闭文件 写入文件的操作:(把大象装进

vue引入图片问题

一、img标签二、scss文件通过在vue文件引入scss样式文件 @import"./scss/index.scss"; 如果scss文件有引入背景图片,这里不能使用相对路径了,需要使用~开头的方式

在react中怎么引用js

在react中怎么引用js推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入。第一种:使用插件react-load-script如果没有安装

css格式文件怎么打开

css格式文件怎么打开css文件可以使用系统自带的记事本打开,也可以使用专业的代码编辑器打开,如sublimetext、vscode、Dreamweaver。css文件是指css代码放到一个单独的文件

html找不到css文件怎么解决

html找不到css文件怎么解决如果你在引用css文件时,使用了错误的文件路径,就会导致引用失效。解决方法就是填写正确的css文件路径。下面我们学习下HTML填写路径的两种方法。(推荐学习:HTML视

nginx找不到js css文件怎么办

nginx找不到jscss文件怎么办js、css都算静态资源,之所以请求不到是因为nginx做代理后的虚拟路径和静态资源的请求路径不一致导致的。只需要更改root的配置就可以了。设置location如

css文件怎么用?

css文件怎么用?css文件使用有两种方式,一种是通过link标签引入,一个是使用@import进行导入。1、通过link使用css文件将下面代码放在head标签中(相关课程推荐:css视频教程)2、

css文件怎么打开

css文件怎么打开?css文件可以使用记事本、vim、sublimetext、vscode打开。实际上,只要是一款文本编辑器,都能打开css文件,因为css文件本质上就是一个文本文件。1、vscode

Flutter高内聚组件怎么做?闲鱼打造开源高效方案!

fish_redux是闲鱼技术团队打造的开源flutter应用开发框架,旨在解决页面内组件间的高内聚、低耦合问题。开源地址:https://github.com/alibaba/fish-redux从

写了一款 iOS App: 足迹中国 - 统计出行省市,生成各省和全国的旅行地图

说具体功能之前,先放一下下载链接:https://apps.apple.com/cn/app/id1482250279功能地图轮廓截取旅行照片,并可分享 统计你去过中国的多少个省,多少个市 将截取的市

【Vue Nginx】项目打包后使用nginx本地服务器运行

一、下载Nginx官网:http://nginx.org/en/download.html我下载的是稳定版本nginx-1.18.0版本 二、解压与修改1、解压出来的结果: 2、打开文件夹中的conf

avue和vue是什么关系?

Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,

Vue命令行工具vue-cli详解

本文将详细介绍Vue命令行工具vue-cli。概述Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cli有以下几大优势1、Vue-cli是一套成熟的vue项目架构设计,会