Comments (10)
Hello,
You need to import your image if you want to import it in dist forlder.
Here Webpack load your image as a string (because it's only a string)You need to require the file like this
backgroundUrl = require('../assets/bg.jpg');<img [src]="backgroundUrl">
This will generate a copy of the image ( somethings like background.fb47ebd287a34c66287e.jpg
) but in the assets
folder it's still present the original file.
How to avoid that?
from angular-electron.
Hello,
You need to import your image if you want to import it in dist forlder.
Here Webpack load your image as a string (because it's only a string)
You need to require the file like this
backgroundUrl = require('../assets/bg.jpg');
<img [src]="backgroundUrl">
from angular-electron.
Works great, thanks!
But what if I need something like this background: #00ff00 url("smiley.gif") no-repeat fixed center
in a component decorator?
@Component({
animations: [
trigger('State', [
state('inactive', style({
//tried this but wont work
background: 'url(' + this.url + ') 0 0/68px no-repeat',
})),
state('active', style({
//manually copied & pasted this in ./dist and it works
background: 'url(./other-bg.jpg) 0 0/68px no-repeat',
})),
transition('inactive => active', [
animate('0.3s ease-in')
]
),
transition('active => inactive', animate('1.5s')
)
])
]
})
export class AppComponent {
url = require("../assets/bg.jpg");
}
from angular-electron.
I'm generating my image urls based off a result of a function, similar to this:
<img class="conditions" src="./assets/img/SVG/{{ selectImage(forecast[0].code) }}"/>
.
However, I'm getting 'Module not found: Error cannot resolve './assets/img/SVG/{{ selectImage(forecast[0].code) }}'' errors. How can I resolve this?
from angular-electron.
Replace "./" for "../".
The assets folder is an level up. That's why webpack can't resolve the resource.
from angular-electron.
I tried that. It still gives me the error.
from angular-electron.
So you must look which level your assets folder is from the template file you are casting the asset file.
from angular-electron.
The path to my image is correct. I decided to test it out by putting it in when I opened the dev tools and manipulating the DOM. I believe it deals with the issue of having to require the image link in the re file before using it within the HTML.
from angular-electron.
Maybe is the interpolation... Try to use ng-src="./assets/img/SVG/{{ selectImage(forecast[0].code) }}".
Even so you'll need to check if Webpack exported the images that you referring to.
from angular-electron.
ng-src wouldn't work since I'm using Angular 2/4. I tried it out anyways and it said that ng-src wasn't a property of img. I also tried [src] and took out the interpolation and that didn't work as well.
from angular-electron.
Related Issues (20)
- Error: Module not found: Error: Can't resolve 'fs' HOT 3
- Any way to update form angular-electron 13 to 16 HOT 1
- Cannot install angular material HOT 2
- A JavaScript error occurred in the main process HOT 1
- Open link start with "#" on Angular HOT 1
- New window HOT 1
- Karma is now deprecated, what's next? HOT 2
- Firebase Not working in desktop app while it's working in (Web Serve & Build) HOT 2
- How to setup findInPage?
- Loading preload scripts HOT 1
- Notification Mini Icon on window
- Kinectron HOT 2
- Electron Builder for windows: Icon Paths Not Translated with Macro in Output Directory HOT 1
- How can I change the splash screen image? HOT 4
- What about esbuild? HOT 3
- [Bug]: failed: Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID when connect mqtt with ca certificate
- What about Nrwl NX? HOT 2
- [Bug]: Application gives blank white screen when tried to reload HOT 2
- Add DesktopCapturer to ElectronService HOT 2
- Registration to Electron events from Angular
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-electron.