We are using Webpack 1 with Angular 2 with typescript. In our app we would like to specify an image to be loaded in the typescript file dynamically.
For example, we have 10+ images (svg) in our pre-processed folder structure:
src\content\images\image1.svg
src\content\images\image2.svg
etc..
In the angular component html file we have the image element with the src binding:
<img [src]="_imgSrc">
In the type script file we set the correct url dynamically based on some criteria:
private _imgSrc: string;
public ngOnInit(): void {
// Some logic...
if (true) {
this._imgSrc = './../../../content/images/image2.svg';
}
else {
this._imgSrc = './../../../content/images/image1.svg';
}
// In real code, the file name will come from a typescript object returned from a web api call
We have configured webpack to use file loader for loading images:
{
test: /\.(png|jpe?g|gif|ico|svg|wav|mp3)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
In all current scenarios (apart from this one), we specify the image path in the html file, e.g
<img src="./../../../content/images/image2.svg">
and these images are copied to the proper output folder, and the path in the typescript file is set to the output folder, so we know our webpack file loader is set up correctly for the standard static approach.
The issue we have with this more dynamic approach:
Webpack does not emit the images to the final image folder:
assets/images
The URL in the typescript file is not converted to the output
image folder.
Is it possible for webpack to find the required images via the path in the typescript file? If so, how do we do this? If not, is there an alternative approach anyone has used for dynamically loading images based on some criteria in typescript?
Related
Vaadin Flow offers an Image class, representing an HTML img tag.
If I have a file named logo.png stored in the resources folder of my Vaadin 12 app, how do I load that file for display as an Image on a layout?
The example for Image in the Vaadin 8 Sampler shows code no longer relevant as I cannot find a ClassResource class in Flow.
You can put that logo under what your build tool/setup considers a root for web resources under the directory frontend/... and then reference that resource like so:
new Image("frontend/images/logo.png", "Acme Inc. Logo")
If your resource is not located inside the root for web resources, this doc page gives a hint on using a com.vaadin.flow.server.StreamResource to provide the data by an java.io.InputStream:
StreamResource res = new StreamResource("logo-image.png", () -> {
// eg. load image data from classpath (src/main/resources/images/image.png)
return MainView.class.getClassLoader().getResourceAsStream("images/image.png");
});
Image imageFromStream = new Image( res,"Alternativ text description for logo image");
add(imageFromStream);
In my case the problem was in the location of the file:
If you use: new Image("img/logo.png", "Logo") then the file location should be /src/main/resources/META-INF/resources/img/logo.png in Spring Boot project
I'm working a project that will dynamically allow the user to change themes, and uses reactstrap and styled-components under the hood. We want to configure all of the variables via SASS, which is working fine. In order to make those variables available to styled-components, we have been using sass-extract-loader to create theme objects.
This all works great when we statically choose one of the themes, but I haven't been able to get it working dynamically reliably. I have two issues:
1) In development, it works fine to switch the theme once. If I change it again, my non-styled-components (i.e., raw reactstrap components) are styled with the second theme. I believe this is because the second theme is loading and overriding the original CSS.
2) In production, I get the same mix as #1 by default (i.e., because all of the CSS files are being put together into a single bundle, reactstrap components are styled one way, while styled-components "honors" the theme).
I believe the best option for us is to have the themes in two separate CSS files, and to toggle "alternate" rels on them. I just don't know how to configure CRA not to put all of the CSS into a single main bundle, and let me manually add links to alternate stylesheets. If I can split them out into separate files, I believe I can just add tags and dynamically swap the rel="alternate" property.
There may well be better ways to accomplish this. My understanding is that the easiest way to control the Bootstrap themes is via SASS variables, and I'd like to make sure those variables don't have to be re-defined when using them in styled-components.
If you want to apply styles conditionally, you can import your stylesheets in your index.js file and make it available to all your components through the context API. First of all we import the CSS files into index.js.
import themeA from './css/themeA.css';
import themeB from './css/themeB.css';
However, by using it this way, you cannot have element selectors in both CSS files, because they would be globally applied from both files. However, you could import an extra stylesheet that complements the selected theme, in which you define the element selectors.
By using CSS modules, you avoid the need for element selectors. You may want to read this article if you are unfamiliar with CSS modules: https://javascriptplayground.com/css-modules-webpack-react/
If you still need to apply element selectors in one theme, you can do so, but they will also get applied in your other theme this way.
import './css/default.css';
This example below is a modified version from the React documentation: https://reactjs.org/docs/context.html
In this example, we draw a button that changes the global theme when
it its clicked. There are three parts in this example that are crucial
to understand if you want to use React its context API.
1. Creating a Context.
Creating a Context is being done by assigning the return value of React.createContext(yourValue) to a variable. This variable can then be used to use the Provider or Consumer component inside your React components.
const ThemeContext = React.createContext();
2. Providing a value by passing it to your Provider component as prop. Now your value is accessible to all your components.
class App extends React.Component {
swapTheme() {
this.setState({ withThemeA: !this.state.withThemeA });
}
render() {
const theme = this.state.withThemeA ? themeA : themeB;
return (
<ThemeContext.Provider value={theme}>
<ThemedButton onClick={this.swapTheme} />
</ThemeContext.Provider>
);
}
}
3. Listening to updates with the Consumer component.
To listen for changes, you need to use the Consumer component. The passed function receives the theme as an argument so it can be assigned to the className prop of the button element.
class ThemedButton extends React.Component {
render() {
return <ThemeContext.Consumer>
{theme => <button className={theme.Button}}>click me</button>}
</ThemeContext.Consumer>;
}
}
I have a webview and would like to show an image in the webview (html)
My HTML :
hello !img src="myimage.png" alt="myimage" height="42" width="42"!
(I used ! as tagend and tagstart, because I don't know how to add this here without be interpreted as HTML, even I pasted as code)
The myimage.png should be stored in app itself and not be loaded from a websource.
I don't know how to do that in a best practice way. Any help ?
UPDATE
I tried with referenced Article, but still not succeeded:
My Code for this:
let path:NSString = NSBundle.mainBundle().bundlePath;
var baseURL:NSURL=NSURL(fileURLWithPath: path as String)!;
var htmlString:String! = texttemp
myWebView.loadHTMLString(htmlString, baseURL: baseURL)
The same Image I can already load like the following -> works:
var image = UIImage(named: "myimage.png");
Your updated code isn't right. You are creating a path to the bundle, not to the specific file. You need to use the NSBundle method pathForResource:ofType (or one of its variants) to build a path to your file. Then use that to create the URL.
The pathForResource:ofType family of methods return nil if the file can't be found, so you should check that you are getting back a path.
EDIT:
Looking at it more closely, I see that you are using the URL as the base URL for a call to loadHTMLString. This does look like a sound approach. What is your HTML string, and where is the image in your bundle?
I have an existing file upload (manual) in my web application. My application already shows existing uploaded files and a way to delete files.
I would like to incorporate the dropzone.js drag and drop into a small target area - but that is all. I don't want dropzone to print/render anything back to the screen - no messages, no images, nothing.
Could someone provide and example of how to configure dropzone for this limited functionality?
You can accomplish this by modifying the stylesheet. For example, setting
.dz-details
{
display:none;
}
will remove the box which shows what was uploaded. By modifying more styles, you should be able to remove the other elements that normally appear.
You can do that on init:
const dropzoneConfig = {
addedfile: file => { console.log(file); }
}
const myDropzone = new Dropzone(myDiv, dropzoneConfig)
Is it possible to have Laravel load view templates with a .html extension?
I'm rebuilding an existing app that has a bunch of .html files that are uploaded by users. It's a sort of multi-tenant application where each user can control the look and feel of their area by uploading templates.
I need to rebuild the app and make the change completely transparent to the users so I'd like to keep the .html extensions.
The best way I have found is to use View::addExtension in your base controller;
Here's my code sample:
View::addExtension('blade.html','blade');
class BaseController extends Controller {
/**
* Setup the layout used by the controller.
*
* #return void
*/
protected function setupLayout()
{
// Allows us to use easy-to-edit html extension files.
// You can set 2nd param to 'php' is you want to
// just process with php (no blade tags)
View::addExtension('blade.html','blade');
if ( ! is_null($this->layout))
{
$this->layout = View::make($this->layout);
}
}
}
I am afraid Blade engine loads .php and .blade.php files only.
From your description I assume the view files are static, since they are HTML only.
If so, rename them to .php after user uploads view files - should not bring performance impact to your application, since there is nothing to process anyway.