Comments (5)
@sibelius webpack does not process html files and <img>
sources won't work.
Id you use React, you do <img src={require('../../img.jpg')} />
, if you use some templating language you will need to pass JS variable like:
const imgSrc = require('../../img.jpg');
// ....
// some kind of template
render(`
<img src="%imgSrc%" />
`)
in angular you would use scope/this
$scope.imgSrc = require('../../img.jpg');
//....
// template.html
<img="imgSrc" />
And so on.
Just remember, that webpack simply returns string from require
statement with files/images with correct path to automatically generated file, so you are then free to use it in any way your templating allows you.
from webpack-howto.
just
content: url("./glyph.png");
You will need to use url-loader
, webpack will do all the rest.
See https://github.com/nkbt/esnext-quickstart/blob/master/webpack.config.js#L19-L24 for example
from webpack-howto.
Thanks! This is probably the best how-to guide out there.
from webpack-howto.
@nkbt is this the same for a img src?
because this line: https://github.com/Lar21/webpack-starter-angular/blob/master/src/components/home/home.html#L7
is not working
from webpack-howto.
@nkbt thanks, this works great! \o/
from webpack-howto.
Related Issues (20)
- How to inject bundled script to existing html? HOT 1
- How to use cors with webpack? HOT 1
- Connecting the frontend with the backend
- How to use webpack async loading with Ionic 2 application ? HOT 1
- Worth adding requirement of having webpack installed?
- Error in main.js when running: Module build failed: ReferenceError: [BABEL] HOT 2
- Capitalisation significance?
- webpack.optimize.CommonsChunkPlugin optimizes common stylesheets to an unexpected file name HOT 1
- Feature flags for different entry points
- Multiple entrypoints: what about components? HOT 1
- Running webpack --watch on old React project gives me the following error
- npm start introduce error
- CSS files: Is there a difference between require() and import?
- webpack command fails with below error. HOT 2
- Add more on language/framework specific configs
- Update to webpack 2 HOT 1
- include css and js files into HTML HOT 1
- webpack inject production js files after all included js files.
- A line of Chinese translation is incorrect HOT 1
- Module build failed: ReferenceError: [BABEL] webpack-howto/example/modules/main.js: Unknown option: direct.presets
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 webpack-howto.