zoukankan      html  css  js  c++  java
  • 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

    ------勉

  • 相关阅读:
    按指定时间段分组统计
    SQL 截取字符
    SQL日期转换
    CentOS7安装rabbitMQ,并实现浏览器访问
    springdata的jpa配置文件application.xml
    在Ubuntu上安装Hive
    在Ubuntu上安装Spark
    在Ubuntu上安装Hbase
    在Ubuntu上安装hadoop-2.7.7
    springboot整合springdatajpa时jar冲突
  • 原文地址:https://www.cnblogs.com/bien94/p/12302445.html
Copyright © 2011-2022 走看看