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 ...
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 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 am having big problems applying classes to my ul elements in React using SCSS and Webpack 4. I have upgraded my project to Webpack 4 ( #yesiamstupid )
If I taget a type of element (ul) it works.
My own class "navMenu" is never applied, though.
I can see the class in the web developer tools --> styles.scss
I expect the text background to be blue in the navigation.
[ app.js ]
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import AppRouter from './routers/AppRouter';
import 'normalize.css/normalize.css';
import './styles/styles.scss';
const jsx = (
<Provider>
<AppRouter />
</Provider>
);
ReactDOM.render(jsx, document.getElementById('app'));
[ AppRouter.js ]
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import StartPage from '../components/StartPage';
import Header from '../components/Header';
const AppRouter = () => (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/" component={StartPage} exact={true} />
</Switch>
</div>
</BrowserRouter>
);
export default AppRouter;
[ StartPage.js ]
import React from 'react';
const StartPage = () => (
<div>
Hello
</div>
);
export default StartPage;
[ Header.js ]
import React from 'react';
import { NavLink } from 'react-router-dom';
const Header = () => (
<header>
<h1>Test WP4</h1>
<ul className="navMenu">
<li><NavLink to="/" activeClassName="is-active" exact={true}>Here we are</NavLink></li>
<li><NavLink to="/undefined" activeClassName="is-active" exact={true}>This route is undefined</NavLink></li>
</ul>
</header>
);
export default Header;
[_base.scss]
html {
font-size: 62.5%;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: $m-size;
}
button {
cursor: pointer;
}
button:disabled {
cursor: default;
}
.is-active {
font-weight: bold;
}
[ _settings.scss ]
// Colors
// Spacing
$s-size: 1.2rem;
$m-size: 1.6rem;
$l-size: 3.2rem;
$xl-size: 4.8rem;
$desktop-breakpoint: 45rem;
[ _header.scss ]
ul {
list-style-type: circle;
}
.navMenu {
text-align:center;
background:blue;
padding-top:400px;
}
[ styles.scss ]
#import './base/settings';
#import './base/base';
#import './components/header';
[ webpack.config.js ]
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = () => {
return {
watch: true,
//mode: 'development',
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'), //absolute path
filename: 'bundle.js' //name is whatever you want
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.svg$/,
loader: 'raw-loader'
}, {
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "style.css",
//chunkFilename: "chunk.css"
})
],
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'), //absolute path
historyApiFallback: true, //go to index if path not found
publicPath: '/dist' //specify where bundle files liveY
}
};
}
I recommend you to split your tests for css and scss files.
In your code you are using sass-loader for css. Instead use something like this:
{
test: /\.css$/,
include: 'path-to-css-files',
use: [
MiniCssExtractPlugin.loader,
'css-loader'
],
},
{
test: /\.(sa|sc)ss$/,
exclude: 'path-to-css-files',
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
],
},
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.