vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.76k stars 6.33k forks source link

How to get base64 img source after webpack? #47

Closed fishenal closed 8 years ago

fishenal commented 8 years ago

i write something like this:

<img :src='rtrImg(ava)'/>

rtrImg (sex) {
      if (sex === '女') {
        return '../img/girl.jpg'
      } else {
        return '../img/boy.jpg'
      }
    }

i cant get the img resource because img has turn to base64 code. how can i get these source in method inside ? or any other way to write?

azamat-sharapov commented 8 years ago

Maybe pass one more attribute? Like data-src. Or you can just disable webpack's url-loader for images.

yyx990803 commented 8 years ago
return require('../img/girl.jpg')

The require will be handled by file-loader and return the after-build file location.

imsunf commented 7 years ago

1.<img :src="icon_src" /> 2.import the image at the top level import icon from 'icon.png';

  1. data () { return { icon_src:icon } } or computed instead
rrki commented 6 years ago

What if I got a base64 bytes array from a restful service? Can I do ?

snail-boy commented 5 years ago

> ```js

return require('../img/girl.jpg')



The require will be handled by file-loader and return the after-build file location.

尤大, vue-cli3项目集成electron-vue 桌面系统, svg 怎么显示不出来,

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
// const requireAll = requireContext => requireContext.keys().map(requireContext)

const requireAll = requireContext => requireContext.keys().map((key) => {
  console.log(key, req(key))
})
requireAll(req)

j转成了base64位图片 image

正常的情况是 image