I build a angular2 webpack app.
put a image in the 'src/assets/images/default.png'
and in webpack.common.js:
new CopyWebpackPlugin([{
from: 'src/assets',
to: 'assets'
}]),
{ test: /\.(jpg|png|gif)$/, loader: 'file' },
new AssetsPlugin({
path: helpers.root('dist'),
filename: 'webpack-assets.json',
prettyPrint: true
}),
when i include in template like this :
<img [src]="path" width="160" height="200" />
this.path='assets/images/default.png';
the image not loaded .
This worked for me using file-loader (npm install file-loader --save-dev) ...
in webpack.common.js
module: {
loaders: [
...
{
test: /\.(png|jpg|gif|svg|woff|woff2|ttf|eot|ico)$/,
loaders: ['file-loader?name=assets/[name].[hash].[ext]']
},
...
]
}
This still does not make background in "style=" attributes work however, which is probably a good thing for best practice.
Related
I'm trying to get v-carousel to show an array of local images.
In my code, you can see I've tried several ways to access the images locally. Nothing shows.
I noticed in the devtools, that the files were coming through as text/html, yet they are saved in my local as PNGs. From what I can tell on my own research, there is some setting some where that needs to be changed??
Any ideas as to why this is the case?
<template>
<div>
<v-carousel>
<v-carousel-item
v-for="(photo, i) in photos"
:key="i"
:src="photo.src"
></v-carousel-item>
</v-carousel>
</div>
</template>
<script>
export default {
name: 'RotatingPhotos.vue',
data() {
return {
photos: [
{
src: '../src/assets/latte.png',
},
{
src: './src/assets/icedtea.png',
},
{
src: '#/src/assets/mocha.png',
},
{
src: 'src/assets/brunch.png',
},
],
};
},
};
</script>
the code where using src attribute in the vuetify.js is there: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VImg/VImg.ts#L110
so, it use background-image: url() in css, the path based on css file.
then please refer to background-image URL not loading using Webpack
I discovered that the text/html designation was not the issue.
I had to use the require method.
photos: [
// Images wouldn't render unless I use the require method
{
src: require('#/assets/latte.png'),
},
{
src: require('#/assets/icedtea.png'),
},
{
src: require('#/assets/mocha.png'),
},
{
src: require('#/assets/brunch.png'),
},
],
};
},
Basically I have this route config:
{
path: '/settings',
name: 'settings',
component: AppLayoutComponent,
children: [
{ path: 'profile', component: ProfileComponent },
{ path: 'profile2', component: ProfileComponent },
]
},
When I navigate to: https://locahost:8000/settings styles are loaded correctly. Please see:
but when I navigate to: https://locahost:8000/settings/profile page styles are not loaded. Please see:
This is so weird. Did I miss something? I am using vue-router.
It's hard to tell from what you've shared but you should check if the styles on your parent route are having scope attribute in styles tag. Ex.
<style scoped></style>
i installed jetstream in laravel 8 by using documentation but it not displayed proper way.
here is the tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
`/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [require('#tailwindcss/forms'), require('#tailwindcss/typography')],
};
First finish your installation then compile assets:
npm install
npm run dev
Php artisan migrate
Afterwards still if it did not work
At the style section of app.blade.php you might be missing:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
I can access the relevant property values from application.properties when browsing to the application on http://localhost:8081, but not using the webpack devserver via http://localhost:9090.
webpack.dev.js (devserver)
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'src/main/resources/templates/index.html',
title: 'Example Application'
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
],
.
.
mode: 'development',
devServer: {
historyApiFallback: true,
hot: true,
port: 9090,
proxy: {
'/': {
target: 'http://localhost:8081',
secure: false,
prependPath: false
}
},
publicPath: 'http://localhost:9090/'
},
devtool: 'inline-source-map',
});
index.html
<html>
<head>
.
.
<script th:inline="javascript">
var SERVICES_URL = [[${servicesUrl}]];
var MAPS_URL = [[${mapsUrl}]];
</script>
</head>
<body>
<div id="react"></div>
<script src="/bundle.js"></script>
</body>
</html>
application.properties
services.url=https://example1.com
maps.url=https://example2.com
When accessing the variable SERVICES_URL in any javascript file while using the webpack devserver, I get the following error because the variable is not getting assigned the value by Thymeleaf.
SyntaxError: missing ] after element list
I assume that it doesn't work on the webpack devserver because its only serving up the frontend code vs the embedded tomcat server, which is serving the server-side code as well.
The solution to this problem is to remove the HtmlWebpackPlugin from the webpack configuration file so that the index is not loaded from the resources file but from the response after Thymeleaf has done its thing.
plugins: [
new CleanWebpackPlugin(),
// new HtmlWebpackPlugin({
// template: 'src/main/resources/templates/index.html',
// title: 'Example Application'
// }),
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
],
I have a Hybrid Mobile Application developed using React.js and PhoneGap. The local images in the browser simulator are loading fine but when I install the Application on the device the images are not loaded. I tried below approaches but none of them load the image on device.
1.
import redcar from './RedCar.png'
<image src={redcar} />
2.
var redcar = require('./RedCar.png')
<image src={redcar} />
3.
<img src="./RedCar.png" />
4.
Copied image into android\assets folder and tried
<image src='/android_asset/www/RedCar.png' responsive />
5.
index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">
Only way it's rendering the images on the device is by giving a background image to div in css file. background-image: url("./RedCar.png");
But I need to read the image paths from JSON so we can't use this approach.
My webpack.config.js looks like this
module: {
rules: [
{ test: /\.js$/,
exclude: /node_modules/,
enforce: 'pre',
},
{ test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
plugins: ['transform-class-properties']
}
},
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /(\.eot|\.woff2|\.woff|\.ttf|\.svg|\.png)/, loader: 'file-loader' },
{ test: /\.ya?ml$/, loader: 'json-loader!yaml-loader' },
{ test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=10000&name=img/img-[hash:6].[ext]' }
/*{ test: /\.html$/, loader: "html-loader" }*/
],
}
I have attached the image of on target debugging, where that particular image shows error.snapshot from device debug
Any idea what's going wrong here ...