文档章节

vue src图片不能显示的解决办法

帅的人连bug都讨厌
 帅的人连bug都讨厌
发布于 2017/06/26 16:33
字数 173
阅读 727
收藏 0

最近在Vue学习交流群里面发现很多小伙伴在想要在vue中显示图片,但是把图片写在data里面作为变量传到模板中的时候却发现图片出不了,以为是图片路径的问题,查了半天还是出不来。

解决方法

方案1: 使用require将图片进入,写法如下

logo: require('../asset/admin/logo.png')
  • 1
  • 1

然后再模板中:

<img :src="logo">
  • 1
  • 1

就可以了。

方案2:把图片放在static文件夹中,如下

这里写图片描述

然后再data里面直接这样写

logo: '../static/images/logo.png'
  • 1
  • 2
  • 1
  • 2

就可以直接使用了。

© 著作权归作者所有

帅的人连bug都讨厌
粉丝 3
博文 53
码字总数 40134
作品 0
杭州
程序员
私信 提问
vue 动态加载图片src的解决办法

首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助  assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< i...

阿K1225
2018/08/10
775
0
好程序员web前端分享Vue学习笔记(一)

好程序员web前端分享Vue学习笔记(一)Vue框架是JS的封装框架,使用了MVVM模式,即model—view—viewmodel模式, 简而言之,就是数据与视图的绑定。 我准备开始学习一些最基础的Vue使用,以此...

好程序员IT
05/09
25
0
好程序员web前端分享菜鸟Vue学习笔记(二)

好程序员web前端分享菜鸟Vue学习笔记(二),今天天气不错,心情也不错,最近学习Vue越来越顺利了,今天接着学习,接着记录。 首先,来学习下常用的v-bind属性,它的作用是在属性中使用vue中...

好程序员IT
05/09
30
0
vue-cli新建工程后提高页面加载速度(含升级webpack4)

提高页面加载速度的方式 升级webpack4.x及升级过程中产生问题的解决方式 webpack升级一路填坑记 图片压缩 + 用一个webpack插件,这个插件叫 image-webpack-loader。+ 安装插件: $ npm inst...

YXMBetter
2018/10/18
118
0
那些花儿,从零构建Vue工程(webpack4)

从零搭建Vue开发环境:webpack4 + vue-loader + koa2 + babel-loader v8 + Babel v7 + eslint + git hooks + editorconfig 从2009到2019社会在不断进步 技术也在不断进步 我们当然也不能落后...

wenli
01/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue中eventBus的使用

使用场景: 1、兄弟组件的通信,父子组件的通信 2、不同路由的通信 针对兄弟组件的通信,父子组件的通信 新建bus.js文件 import Vue from 'vue' var bus = new Vue() export default bus 在需...

tianyawhl
19分钟前
4
0
C# DBHelper

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Data;using System.Data.SqlClient;using System.Windows.Forms;namesp......

vga
22分钟前
4
0
Spring Boot中@ConditionalOnProperty使用详解

在Spring Boot的自动配置中经常看到@ConditionalOnProperty注解的使用,本篇文章带大家来了解一下该注解的功能。 Spring Boot中的使用 在Spring Boot的源码中,比如涉及到Http编码的自动配置...

程序新视界
23分钟前
7
0
centos7下安装mysql(完整配置)

https://blog.csdn.net/baidu_32872293/article/details/80557668

为何不可1995
25分钟前
5
0
如何从零到一设计一个MQ消息队列

消息队列整体设计思路 主要是设计一个整体的消息被消费的数据流。 这里会涉及到:消息生产Producer、Broker(消息服务端)、消息消费者Consumer。 1.Producer(消息生产者):发送消息到Broker。...

一只会编程的狼
31分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部