Vue如何动态配置img标签的图片源src
(一)首先通过绑定数据给src提供图片地址
<template>
<div>
<img :src=image_path />
</div>
</template> <script>
export default {
data() {
return {
image_path: "../assets/imgs/hello.png" // 我这里是根据图片在源码中的路径来确定的,需要依据具体的情况来赋值
}
}
}
</script>
(二)通过配置文件来配置图片路径
假设在根目录下有个static目录,在该目录下有个img文件夹,在该文件夹下有个hello.png文件,即static/img/hello.png
同时在static/js/目录下建立一个配置文件,如:config.js文件,即static/js/config.js,其内容如下:
'use strict' module.exports = {
IMAGE_PATH: '/static/img/hello.png',
}
(三)在webpack.base.conf.js文件中保持图片名称不变
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[ext]')
}
}
(四)在Vue文件中应用配置文件
const configConstants = require('static/js/config.js')
此时可以给image_path这样赋值:configConstants.IMAGE_PATH
------勉
Vue如何动态配置img标签的图片源src的更多相关文章
- Vue系列——动态设置img标签的src属性
声明 本文转自:vue动态设置img的src路径 正文 相信开发的小伙伴已经遇到这个问题了,动态切换img标签的src时,写的路径就是不生效,原因是vue并没有把你的路径字符串当做路径来处理,而是直接 ...
- 【转】vue中动态设置meta标签和title标签
因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 { path: '/teachers', name ...
- vue入门全局配置
全局配置 Vue.config 是一个对象,包含 Vue 的全局配置.可以在启动应用之前修改下列属性: silent 类型:boolean 默认值:false 用法: Vue.config.silen ...
- 周记4——vue中动态添加图片无效、build上线后background-image路径问题
又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- Spring Boot打包瘦身 Docker 使用全过程 动态配置、日志记录配置
springBoot打包的时候代码和jar包打包在同一个jar包里面,会导致jar包非常庞大,在不能连接内网的时候调试代码,每次只改动了java代码就需要把所有的jar包一起上传,导致传输文件浪费了很 ...
- Spring动态配置多数据源
Spring动态配置多数据源,即在大型应用中对数据进行切分,并且采用多个数据库实例进行管理,这样可以有效提高系统的水平伸缩性.而这样的方案就会不同于常见的单一数据实例的方案,这就要程序在运行时根据当时 ...
- iOS中动态注入JavaScript方法。动态给html标签添加事件
项目中有这样一种需求,给html5网页中图片添加点击事件,并且弹出弹出点击的对应的图片,并且可以保持图片到本地 应对这样的需求你可能会想到很多方法来实现. 1. 最简单的方法就是在html5中添加图片 ...
- 【前端】vue.js环境配置以及实例运行简明教程
vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...
随机推荐
- FFmpeg被声明为已否决的解决方案
参考雷神的最简单的打印Hello World的程序: #include <stdio.h> #include <string.h> extern "C" { ...
- VC获取cookies的几种方法
方法一: CInternetSession::GetCookie This member function implements the behavior of the Win32 function ...
- lua学习之语句篇
语句 赋值 修改一个变量或者修改 table 中的一个字段的值 多重赋值,lua 先对等号右边的所有元素进行求值,然后再赋值 值的个数小于变量的个数,那么多余的变量就置为 nil 初始化变量,应该为每 ...
- python 迭代器和生成器详解
一.迭代器 说迭代器之前有两个相关的名词需要介绍:可迭代对象:只要定义了__iter__()方法,我们就说该对象是可迭代对象,并且可迭代对象能提供迭代器.迭代器:实现了__next__()或者next ...
- Loj 6002 最小路径覆盖(最大流)
题意: 求不相交的最小路径覆盖 思路: 连边跑二分图,匹配一条边相当于缩了一条边,答案为n-maxflow 如果是求可以相交的最小路径覆盖的话,先用Floyd跑出可达矩阵,然后所有可达的点连边跑二分图 ...
- HDU4195 Regular Convex Polygon (正多边形、外接圆)
题意: 给你正n边形上的三个点,问n最少为多少 思路: 三个点在多边形上,所以三个点的外接圆就是这个正多边形的外接圆,余弦定理求出每个角的弧度值,即该角所对边的圆周角,该边对应的圆心角为圆心角的二倍. ...
- Python学习框架(持续更新)
1.数据类型 整型:整数,1.2.3...这种 浮点型:简单理解就是小数,1.23.3.141572653等等 字符型:“这是字符”,简单说就是我们说的话,都可以作为字符 布尔值:只有2种,true. ...
- DRF框架的安装与使用
目录 DRF框架的安装与配置 基于restful接口规范的接口设计 DRF框架的安装与配置 """ 1)安装 >: pip install djangorestfr ...
- Go语言实现:【剑指offer】重建二叉树
该题目来源于牛客网<剑指offer>专题. 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4 ...
- 获取本机网卡ip地址
import sys, os import socket, struct, fcntl import six import psutil def get_ip(iface="enp0s3&q ...