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.

Load image from inline-style or img tag

See original GitHub issue

I have the following code

div [ class "picture", style [("background-image","url(images/img-example.png)")]][ ]

or

div [ class "picture" ] [ 
   img [ src "images/img-example.png"] []
]

but after build the app with webpack the image is not loaded… how can accomplish that? I need the image loaded inline because is dinamyc (comes inside a record attribute).

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:5
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
lethjakmancommented, Sep 8, 2016

So, just to make a workaround available I used the copy-webpack-plugin for this.

var CopyWebpackPlugin = require('copy-webpack-plugin')
var path = require("path");

module.exports = {
    ...
    plugins: [
        new CopyWebpackPlugin([
            { from: 'assets', to: 'assets/' }
        ])
    ],
    ...

All this does is copy the assets directory to the dist/ directory when building. However not ideal…it will work. In to do this properly I believe you’d have to run a require on each of those images somehow.

1reaction
rtfeldmancommented, Aug 19, 2016

I’m gonna close this for now. Will happily reopen if someone can post a SSCCE so we can see what the problem is! 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

<img>: The Image Embed element - HTML - MDN Web Docs
Styling with CSS​​ <img> is a replaced element; it has a display value of inline by default, but its default dimensions are defined...
Read more >
Webpack: load images from inline style (background-image)
The alternative I am taking now is to use CopyWebpackPlugin to clone all background-image source into dist (the ouput) folder, and use relative ......
Read more >
How to Add an Image to a CSS File
Web pages normally add images using the inline HTML "img" tag. CSS coding usually doesn't set an image's source because CSS controls design...
Read more >
Lazy Loading Images – The Complete Guide - ImageKit.io
Lazy Loading Techniques for images. Images on a webpage can be loaded in two ways - using the <img> tag, or using the...
Read more >
Adding Media - Learn to Code HTML & CSS - Shay Howe
To add images to a page, we use the <img> inline element. The <img> element is a self-containing, or empty, element, which means...
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 Reddit Thread

No results found

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