vue src动态加载请求获取的图片

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

一. 加载本地图片

这里写图片描述


1.图片目录


2. 在data中配置图片路径

    data() {
        return {
          formData: {
            avatar: require('@/assets/icon1524737568182.png'),
            motto: 'xxxxxxxxxx'
          },
          routers: this.$router.options.routes
        }
      }


3. 在需要的地方引入图片

    <div class="avatar"><img :src="formData.avatar" alt=""></div>

二. 加载请求获取到的图片


1.配置文档build/webpack.base.conf.js

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('images/[name].[hash:7].[ext]')
        }
      },
这里写图片描述



2.图片一类的静态文件,应该放在这个static文件夹下,这个文件夹下的文件(夹)会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径,就可以访问这些静态文件了。

3.请求数据

created() {
    const that = this
    this.request({
      url: '/sysInfoFront/list',
      method: 'get'
    }).then(function(res) {
      const resData = res.data
      if (resData.code === 100) {
        const avatear = resData.data.avater
        resData.data.avatar = avatear
        that.formData = resData.data
      }
    })
  },
这里写图片描述

请求的结果:


4.在需要的地方引入图片

    <div class="avatar"><img :src="formData.avatar" alt=""></div>
这里写图片描述


两种方式的最终图片显示效果

点这里可以跳转到人工智能网站

发表评论