question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to get base64 img source after webpack?

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
imsunfcommented, Jul 5, 2017

1.<img :src="icon_src" /> 2.import the image at the top level import icon from 'icon.png'; 3. data () { return { icon_src:icon } } or computed instead

2reactions
yyx990803commented, Feb 26, 2016
return require('../img/girl.jpg')

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to base64 images using webpack? - Stack Overflow
Here's a few steps you should follow to sort your problem out: Add html-loader to your webpack.config.prod.js : webpack.config.prod.js
Read more >
How to fix broken base64 image using image-webpack and ...
The problem I was experiencing and tyring to document here is, after installing image-webpack and file-loader and using <img src={require('logo.
Read more >
url-loader | webpack - JS.ORG
A loader for webpack which transforms files into base64 URIs. Getting Started. To begin, you'll need to install url-loader : $ npm install...
Read more >
Handling Images - Medium
With Webpack, the image loading can be optimized using the url-loader that converts your images to base64 strings and inlines those within the...
Read more >
Fast Inline Images With React and Webpack - Request Metrics
Webpack can automatically inline image data, improving performance by reducing the ... </p> // AFTER: <p> <h3>Some small images:</h3> <img src={require(".
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found