Vue.js中的图片引用路径的方式
作者：卜小娴 发布时间：2024-05-09 15:28:10
标签：vuejs,图片,引用路径
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形：
使用一
我们在data里面定义好图片路径
imgUrl:'../assets/logo.png'
然后，在template模板里面
/*错误写法*/
<img src="{{imgUrl}}">
这样是错误的写法，我们应该用v-bind绑定图片的srcs属性
<img :src="imgUrl">
或者
<img src="../assets/logo.png">
这种方式是按照正常HTML语法引用路径，放在模板里可以被webpack打包出来。
使用二
当我们需要在js代码里面写图片路径的时候，如果我们在data里面写
/*错误写法*/
imgUrl:'../assets/logo.png'
此时webpack只会把它当做字符串处理从而找不到图片地址，此时我们可以使用import引入图片路径：
<img :src="avatar" />
import avatar from '@/assets/logo.png'
在data里面定义
avatar: avatar
情形三
我们也可以把图片放在外层的static文件夹里面，然后在data里面定义：
imgUrl ： '../../static/logo.png'
<img :src="imgUrl" />
总结
以上所述是小编给大家介绍的Vue.js中的图片引用路径的方式网站的支持！
来源：http://blog.csdn.net/letasian/article/details/76219889
0
投稿猜你喜欢
- 精妙的"SQL"语句:◆复制表(只复制结构,源表名：a 新表名：b)SQL: select * into b from
- 终于下决心把python从2.7升到了3.7。懒人安装当然使用Anaconda。安装成功，编译成功。但是用pip 安装包的时候提示：pip
对于web开来说，用户登陆、注册、文件上传等是最基础的功能，针对不同的web框架，相关的文章非常多，但搜索之后发现大多都不具有完整性，对于想- 以下各种方式仅供参考，本人亲测只有官方提供的方式比较靠谱。1. 使用多个进程启动多个Tornado实例import tornado.http
- 使用Python创建websocket服务端，并给出不同客户端的请求一、 WebSocket是啥WebSocket 和HTTP一样，也是一种
- 编这个程序是想过节过年,一些重要的纪念日,给亲戚好友发祝福之类的,但要凌晨0点才显得比较有诚意,可我又比较贪睡,常常忘了,所以就有了编个微信
- 本文实例讲述了python实现忽略大小写对字符串列表排序的方法，是非常实用的技巧。分享给大家供大家参考。具体分析如下：先来看看如下代码：st
- 这篇文章主要介绍了python DataFrame转dict字典过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考
- python 使用get_argument获取url query参数ornado的每个请求处理程序，我们叫做handler，handler里
- 1 参数选择 径向畸变3个参数还是两个参数默认两个参数如果是三个参数2准备转化生成结果二参数的转化代码writeExternalandInt
- Request.ServerVariables("Url") 返回服务器地址Request.ServerVariable
- 示例1：pycallclass.cpp：#include <iostream>using namespace std;typed
- 在编译 PHP 时，如无特殊需要，一定禁止编译生成 CLI 命令行模式的 PHP 解析支持。可在编译时使用 –disable-CLI。一旦编
- 一、Xpath概述1、Xpath简介Xpath（XML Path Language） 是一门在 XML 文档中查找信息的语言，可以
- 基本映射映射使用在根据不同URLs请求来产生相对应的返回内容.Bottle使用route() 修饰器来实现映射.from bottle im
- $r = new ReflectionClass($this); Zend_Debug::dump($r->getConstants(
- Microsoft SQL Server 表不应该包含重复行和非唯一主键。为简洁起见，在本文中我们有时称主键为“键”或“PK”，但这始终表示
- 概述从今天开始, 小白我将带领大家一起来补充一下 数据库的知识.条件查询我们可以使用关键词Where来指定条件, 用于插入, 修改删除或者查
- 01-初心缘由最近在研究语音识别方向，看了很多的语音识别的资料和文章，了解了一下语音识别的前世今生，其中包含了很多算法的演变，目前来说最流行
- 本文实例讲述了PHP日志LOG类定义与用法。分享给大家供大家参考，具体如下：<?php/*** PHP log 类 */class C
