Vue如何动态配置img标签的图片源src
2023-09-14 09:08:23 时间
(一)首先通过绑定数据给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打造一个移动端音乐播放器
- Vue_(Router路由)-vue-router路由的基本用法
- Vue - 项目配置 ( element , 安装路由 , 创建路由 )
- vue模板语法
- vue-cli3实现分环境打包步骤(给不同的环境配置相对应的打包命令)
- 2-3 vue配置介绍
- [VueJS + Typescript] Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS
- [Vue] Use Vue.js Component Computed Properties
- vue3:vue+nginx+php进行服务端部署的配置(nginx/1.18.0 / vue@3.2.37)
- linux:ubuntu21.04:npm安装@vue/cli时报错(@vue/cli 4.5.13/npm 7.21.0/node 14.17.1)
- 仓库管理系统-前后端分离项目(SpringBoot+Vue)
- vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法;
- Vue项目的预渲染与页面元信息配置
- Vue中data元素之间相互赋值的陷阱
- 190:vue+openlayers 调整卫星运动的播放速度,展示运动轨迹
- 104:vue+openlayers 配置Icon和text的参数( 代码示例 )
- ECharts用法及常用配置项详解(Vue环境)
- WebStorm配置启动Vue项目
- vue常用修饰符
- VUE之VUEX常见面试题大全汇总--史上最全【vuex面试题】
- vue项目配置打包测试环境/生产环境
- Vue基本语法
- 测试开发之Vue学习笔记-H5实例百度音乐