I am trying give img src path from outside of angular project .please resolve my problem as soon as possible.
My folder structure were look like
ProjectName
\backend
\assets
\images\test.png
angularprojectroot
\app
\src
\component files
In file paths you can go up a step with ..
<img src="../../../../backend/assets/images/test.png" />
Definitely for development only. In production serve the test.png from your server.
In your specific case using angular.json add this to your assets:
// assets is an array. Keep the other items in the array but add the one displayed below
"assets": ["../../../backend/assets/images/test.png"]
Then I believe you can just refer to the image as test.png:
<img src="test.png" />
Related
After upgrading from Vaadin 14.5 to 14.6 I'm facing problems with CSS that contains URL's that point to content.
For example, the following CSS no longer works:
:host([part="my-part"]) [part="reveal-button"]::before {
content: url("../images/my-image.svg");
}
It fails to "compile" when running the build-frontend goal of the Vaadin Maven plugin with the following error:
ERROR in ../node_modules/#vaadin/flow-frontend/styles/components/my-component.css
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../images/my-image.svg' in '<Project Path>\node_modules\#vaadin\flow-frontend\styles\components'
The same error appears in the browser if I try to run the project. This CSS has worked fine in all previous versions of Vaadin 14.
Has anyone encountered anything similar, or have any ideas as to what has changed that might cause this?
With the new custom theme feature the .css loader has changed from raw-loader to css-loader but it shouldn't touch urls outside of frontend/themes/[theme-name] or node_modules
Is the styles/components/my-component.css located in src/main/resources/META-INF/frontend, src/main/resources/META-INF/resources/frontend or src/main/resources/META-INF/resources to be packaged as an add-on jar or compatibility mode?
As in that case the css would end up inside node_modules which might make a difference to the resolving.
As a workaround if you are not building an add-on you should be able to move the css and image to {project_root}/frontend and it should build fine.
Until release of 14.6.2 you can add the raw-loader dependency to a java class with
#NpmPackage(value = "raw-loader", version = "3.1.0")
and then add to webpack.config.js the lines
if(flowDefaults.module.rules[2].test.toString().includes('.css')) {
flowDefaults.module.rules[2].use = [ {loader: 'raw-loader' }];
} else if(flowDefaults.module.rules[1].test.toString().includes('.css')) {
flowDefaults.module.rules[1].use = [ {loader: 'raw-loader' }];
}
Did you change the css structure to follow the new theme structure introduced in 14.6? It is not needed, but it is important context. I think it is at least related to your issue.
The path seems a little weird in your error messages, ending up in a node_modules folder. Could you share where this file is in, and what loads the file to your project?
With the new theme structure, I've used the following css to import images in css:
background: url('./images/fire.png');
And that was placed in a file: frontend/themes/mythemename/mythemefile.css
I'm trying to create link for the file upload. I'm calling file upload function from .cfc file. The file should be uploaded in a different folder. Here is what I get if after this code is executed in component.cfc page:
<cfset thisPath = ExpandPath( "./" ) />
C:\\wwwroot\\myapp\\components\\
I need to go level back in myapp and open bug folder. Then in a bug folder I need to direct the path either to folder1/ documents or folder2/documents. That will depend on the form field, here is example:
<cfset folder = trim(form.type) EQ 1 "folder1" : "folder2">
The path should either point to:
C:\\wwwroot\\myapp\\bug\\folder1\\documents\\
or
C:\\wwwroot\\myapp\\bug\\folder2\\documents\\
I'm looking for a solution that will work even if I roll this code to a different server with the same directory structure. Is there a good way to achieve this in ColdFusion?
i'm attempting to include fontawesome (fa) in my grails 3 project. I saw for grails2 there was a plugin for this, but the configuration and explanation for how to install this plugin didn't seem to work in grails 3.
So I tried to add fa more or less manually by creating an assets/fonts/ directory, and placing the fonts in there, added the css to my stylesheets directory and referenced it from the application.css. When I run in Idea via grails run-app all the fa resources show up fine.
However when I package a war file to run in tomcat, none of the fa resources show up at all. When I look at the compiled style sheet that is created for the app, the ../fonts/ that I put in my fa style sheet has been removed, and then the font files can't be found.
#font-face {font-family: 'FontAwesome';src: url('fontawesome-webfont-32400f4e08932a94d8bfd2422702c446.eot?v=4.5.0')
This generated font resource, and all the others are not resolvable(404) from the root of my application, but are resolvable if I prepend /assets/ to them.
What am I missing configuration wise with the asset pipeline to get this working?
As mentioned in the comments you can use the Grails 3 bootstrap-framework hosted on GitHub https://github.com/kensiprell/bootstrap-framework
Works like a charm.
Create a folder called 'fonts' in grails-app/assets. In this folder place the unzipped content containing font-awesome files. You should have something like:
grails-app
|__assets
|__fonts
|__css
|__fonts
|__less
|__scss
....
Then, for the asset pipeline to know the new directory, reference it in the build.gradle file. You should have something like:
assets {
minifyJs = true
minifyCss = true
includes = ["fonts/*"]
}
Download Fonts from this link enter link description here and in that add Fonts folder only to assets in grail app.Add below code:
assets {
minifyJs = true
minifyCss = true
includes = ["fonts/*"]
}
The iOS guideline requires launch image for all apps. To my understanding, that's a "default.png" file located in the root folder of your app.
I packaged my app using Sencha CMD v3 and I don't see any launch image while loading.
There are some default launch images located in root/webapp/resources/loading/ folder but they are not showed in my app. Any idea?
The "startupImage" seems only appliable to the app added to the home screen, anyway, here is a part of my app.js:
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
}
Added related posts:
[2.1] Splash screen is white on startup on Android and iOS
I have this at the beginning of my application - I'm not packaging it for iOS, but this seems like what you may need:
Ext.require([
'Ext.XTemplate',
'Ext.Panel',
'Ext.Button',
'Ext.List'
]);
// Main application entry point
Ext.application({
phoneStartupScreen: 'images/sencha_logo.png',
name: 'Analytics',
// setup our MVC items
Here is a handy-dandy link to the api doc on this:
http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Application-cfg-phoneStartupScreen
For launch image you need to modify the index.html in your app directory. In here you will find a div with id appLoadingIndicator inside body tag. In my application I have replaced the content of #appLoadingIndicator with an img tag which refers to my splash image.
<div id="appLoadingIndicator">
<img src="resources/images/splash.png" />
</div>
For customizing the css you might want to remove the default embedded styles in index.html present in style tag inside the head tag which are applied to #appLoadingIndicator.
Now add your custom css and you will have your splash image ready.
Im currently in the process of porting a completely static site using trigger io to convert it to an app. The site comprises of lots of folders in folders with index.html files in them to make the urls nice. The site uses absolute urls to include stylesheets, javascripts, on a tags, and images in every page.
I would like to set a root directory for trigger.io, but I cannot find any way of doing this. Is this even possible?
Cheers,
Rich
Edit:
Example:
<script src="/json.js" type="text/javascript"></script>
<img alt="Bar_hat" class="bar_hat" src="/assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
The script tag is in all of the files.
The img tag is used in 90% of the files. These are obviously not being found from within the app.
Copy your "assests" directory to the "src" directory and use without a "slash" before assets -
<img alt="Bar_hat" class="bar_hat" src="assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
Also, if you want to access via javascript you must use this pattern:
forge.file.getUrl("assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg",
function(file) {
// If using zepto or jquery
$("#whateverImage").attr("src", file);
},
function(err) {
// error
}
);
Edit: getUrl vs getLocal