New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Load image from inline-style or img tag #54

Closed
matiasfh opened this Issue May 31, 2016 · 12 comments

Comments

Projects
None yet
7 participants
@matiasfh
Copy link

matiasfh commented May 31, 2016

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).

@douglascorrea

This comment has been minimized.

Copy link

douglascorrea commented Jun 28, 2016

@msdark did you got some workaround for this?

@esmevane

This comment has been minimized.

Copy link

esmevane commented Jul 30, 2016

Pretty curious about this as well @msdark. I'd like to use this feature in my Elm code and it seems directly related.

@eeue56

This comment has been minimized.

Copy link
Member

eeue56 commented Jul 30, 2016

Can you provide an example of this?

@esmevane

This comment has been minimized.

Copy link

esmevane commented Jul 30, 2016

Sure! It's probably just one of those things Elm's built-in isolation prohibits (and that's fine), but in, for example, a React code-base, what I tend to do is pair a component with its own css module.

/* src/ComponentName/styles.module.css */
.someClassName { color: red }
// src/ComponentName/index.js
import React, { Component } from 'react'
import styles from './styles.module.css'

export default class ComponentName extends Component {
  render() {
    return <div className={ styles.someClassName } />
  }
}

In the above case, css-loader can be set up so that it will build unique class names for that single component, and when you import it, it gives you an object that contains that generated class name.

Like I said, it does seem like maybe this is just one of the side-effects of Elm naturally isolating its programs, and that's fine - I just wanted to be sure I wasn't missing something. For now I'm just using a global stylesheet and traditional, non-modular styling.

@eeue56

This comment has been minimized.

Copy link
Member

eeue56 commented Jul 31, 2016

I meant, can you provide a minimal project with "expected" output and "actual" output?

@rtfeldman

This comment has been minimized.

Copy link
Member

rtfeldman commented Aug 12, 2016

@msdark @esmevane can anyone post a SSCCE to reproduce this? Not much can be done about this otherwise. 😄

@rtfeldman

This comment has been minimized.

Copy link
Member

rtfeldman commented 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! 😃

@rtfeldman rtfeldman closed this Aug 19, 2016

@lethjakman

This comment has been minimized.

Copy link

lethjakman commented 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.

ThomasWeiser added a commit to participateapp/web-client that referenced this issue Jan 22, 2017

Style header right: login / user menu
Also include all images from src/static/images at URL path /images/
by webpack plugin copy-webpack-plugin.
See: elm-community/elm-webpack-loader#54

oliverbarnes added a commit to participateapp/web-client that referenced this issue Jan 25, 2017

Implement styling for 0.0.1 (#56)
* Html header for MDL: color scheme and viewport

* topWithScheme not needed if css is loaded in html header

http://package.elm-lang.org/packages/debois/elm-mdl/7.6.0/Material-Scheme#topWithScheme

* Copy static files (css and images) from mockup

* Style viewHeader

* Integrate css and image files from their directories

* Style header right: login / user menu

Also include all images from src/static/images at URL path /images/
by webpack plugin copy-webpack-plugin.
See: elm-community/elm-webpack-loader#54

* Style landing page -> first section (hero)

* Style landing page -> feature section

* Style landing page -> lower section. Style footer.

* Style proposal list (WIP)

* Style proposal list entry

Proposal state on card with flexboxes

* Style proposal view

* Style new-proposal view

* Employ a mdl snackbar for notifications

Closes #15

* Add a progress indicator

* Add snackbar notice: proposal supported
@sahalsaad

This comment has been minimized.

Copy link

sahalsaad commented Jul 28, 2017

Hi,

I have the same issue.

How can we get the image from elm ?

In react I have this:

import React from 'react';
import image from '../path/to/image.png';

export default() => {
    return (
      <span className="container">
        <span className="icon">
          <img src={image} />
        </span>
      </span>
    );
}

In Elm:

port module Icon exposing (main)
import Html exposing (span, img)
import Html.Attributes exposing (class, src)
import image ?

main = 
    span [class "container"]
         [span [class "icon"]
               [img [src image] []
               ]
         ]
@esmevane

This comment has been minimized.

Copy link

esmevane commented Jul 28, 2017

@sahalsaad

Not sure how to do Images, but I wound up using JS interop (ports/subscriptions) to "hoist" the behavior out of Elm and wire it to Webpack through the index.js which marshaled my Elm app.

It looked like this: https://gist.github.com/esmevane/d8187ccfd11b125a22f1e3d07c0d4ebf

If I were to extend this to images, my first guess would be to implement something similar to this: I'd create some sort of loader function in JS, then just couple that to Elm's interop and instead of declaring that I had an image in the Elm side, I'd declare that it has the results of the interop.

Hope this helps some!

@eeue56

This comment has been minimized.

Copy link
Member

eeue56 commented Jul 28, 2017

Eh, not a good idea. See this instead: https://github.com/NoRedInk/elm-asset-path/

@esmevane

This comment has been minimized.

Copy link

esmevane commented Jul 28, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment