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. ...
随机推荐
- ROS和Gazebo进行机器人仿真(一)
Gazebo是一种多机器人仿真器,可用于室内外机器人仿真.Gazebo在ROS中有良好的接口,包含ROS和Gazebo的所有控制. 若要实现ROS到Gazebo的通信,我们必须安装ROS-Gazebo ...
- 代理IP批量验证程序
#include <afxinet.h> #include <afxwin.h> #include <iostream> #include <fstream& ...
- java代码之美(15)---Java8 Function、Consumer、Supplier
Java8 Function.Consumer.Supplier 有关JDK8新特性之前写了三篇博客: 1.java代码之美(1)---Java8 Lambda 2.java代码之美(2)---Jav ...
- vue文件引入全局样式导致样式重复
通常项目中src下的子目录都会有一个style文件夹,专门用来存放全局的样式文件. 这个style文件夹下,一般有reset.css.var.scss.mixin.scss.class.scss.in ...
- 2020牛客寒假算法基础集训营4 -- A : 欧几里得
A:欧几里得 考察点 : 递推, gcd 坑点 : long long 这道题题解说的十分详细,是裴波那契的一种变形,只不过换成 gcd 了. Code: #include <cstdio> ...
- MySql Docker的一些操作方法
偶尔有需求,涉及到数据库的改动,那一定要表结构改动.程序调试都先在测试环境淬炼千百遍. 现在流行微服务.docker部署,很容易拉起一整套环境. Compose File Demo mysql: im ...
- VMware 克隆 CentOS 后网卡信息修改
概述 在我们需要多台 CentOS 虚拟机的时候,对已有虚拟机的系统进行克隆或是复制.但是这样做又有一个问题,克隆出来的虚拟机启动的时候你输入命令:ifconfig,eth0 网卡信息没了,只有一个 ...
- 杭电-------2047阿牛的eof牛肉串(C语言写)
/* 主要看最后一个是否为O,若为O,则倒数第二个不能为O,则为a[n-2]*1*2; 若不为O,则最后一个有两个选择则为a[n-1]*2 */ #include<stdio.h> ] = ...
- JMeter接口测试-如何循环使用接口返回的多值?
前言 在用JMeter做接口测试的时候,经常会遇到这样一种情况:一个接口请求返回了多个值,然后下一个接口想循环使用前一个接口的返回值:第二种情况:只想循环请求前一个接口返回值中的随机不定长度的某一些值 ...
- To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.
mongoose报错:DeprecationWarning: current Server Discovery and Monitoring engine is deprecated, and wil ...