When I tried to set image source with below code then it's working fine
<Image source={require('/home/xbyte/Ravi/React Native/projects/saloonApp/app/img/bg.jpg')} style={styles.image} />
But then I tried to set image source like other users using below code at that time it's not working properly
<Image source={require('./app/img/bg.jpg')} style={styles.image} />
kindly please help me to get out of this issue.
thanks in advance.
Not sure what your exact problem is
Option 1
Move your images to drawable folder which is available at my-app-mobile\android\app\src\main\res\drawable
But for setting up images source use could uri as below
<Image source={{ uri: "bg.jpg" }} style={styles.deviceIcon} />
Option 2
Use a different command line as it seems your images are not bundled
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
Related
I am trying to render an illustration with the following path /public/illustrations/free_mode.jpg, but for some reason when I navigate to the page where the image is supposed to be rendered the image is not found and yarn dev command exit with code 137. When I checked .next folder I've found all the other images in the cache except for the one causing the error. My code is the following:
<Image
src="/illustrations/free_mode.jpg"
alt="illustration"
width={300} height={300}
className="w-full h-9 md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
/>
It worked well for other images but when I added this one it doesn't the app server crashed.
To use a local image, import your .jpg, .png, or .webp files:
import freeMode from './illustrations/free_mode.jpg'
<Image
src={freeMode}
alt="illustration"
width={300} height={300}
className="w-full h-9 md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
/>
I have a react application and I'm trying to use WebDataRocks to render data from my bd. But, when I try to build I'm getting an error that says:
TS2503: Cannot find namespace 'WebDataRocks'.
I tried several stuff, but I still receive the error. The only things that's working is when I add a flag of ignoring the typescript type of and index.d.js. But, I can't change the modules because it's not gonna work when I send the code for prod area.
My guess is the file should be tsx not ts. But, again I can't change the modules.
Any thoughts?
I kindly suggest creating a new project and embedding WebDataRocks to check how modules should be imported.
Here is a short guide:
If you don’t have a React+TS application yet, create one by running this command in the console:
npx create-react-app my-app --template typescript
cd my-app
Get the WebDataRocks React module from npm:
npm install react-webdatarocks
Add WebDataRocks’ styles to the src/index.tsx file:
import 'webdatarocks/webdatarocks.css'
Import the WebDataRocksReact module to the src/App.tsx file:
import * as WebDataRocksReact from 'react-webdatarocks';
Open src/App.tsx and add WebDataRocks there using the WebDataRocksReact.Pivot component:
function App() {
return (
<div className="App">
<WebDataRocksReact.Pivot
toolbar={true}
componentFolder="https://cdn.webdatarocks.com/"
width="100%"
report="https://cdn.webdatarocks.com/reports/report.json"
/>
</div>
);
}
Run your application:
npm start
Open http://localhost:3000/ in the browser — WebDataRocks is embedded into your React+TS project.
After npm migrate, I get the following error in my code:
Module 'nativescript-filter-select' not found for element 'nativescript-filter-select:FilterSelect'.
System.err: > layout_base_1.CSSType is not a function
In my xml, I have used
xmlns:FS="nativescript-filter-select"
and
<FS:FilterSelect row="5" change="changeJud" col="0" multiple="false" close="{{ closeModal }}" items="{{ judete }}" search_param="judet" primary_key="id_judet" />
Is there a solutin for this?
So, I figured out I had to uninstall the module and reinstall it. Apparenty, only installing it (without being uninstalled first) did not do the trick.
I am unable to load an image localy and display it on the screen.
I have a file structure like this
src/
- app/
- assets/
image.jpg
header.jpg
logo.svg
- app.module.ts
so I have tried:
attempts:
<Image src="~src/app/assets/image.jpg" stretch="none"></Image>
----
<Image src="~/app/assets/image.jpg" stretch="none"></Image>
----
<Image src="~app/assets/image.jpg" stretch="none"></Image>
----
<Image src="~/assets/image.jpg" stretch="none"></Image>
----
<Image src="~assets/image.jpg" stretch="none"></Image>
none of them works.
the terminal is showing this error:
JS: Error in reading bitmap - java.io.FileNotFoundException: /data/data/org.nativescript.myapp/files/app/assets/image.jpg (No such file or directory)
As of Nov 10 2020. I was able to fix it using this solution from this Github issue Nativescript-Angular Issue
what fixed it for me is I moved the assets/ folder inside src/ folder.
structure like this:
src/
- app/
- app.module.ts
- assets/
image.jpg
header.jpg
logo.svg
and then in html:
<Image src="~/assets/image.jpg"></Image>
I have installed Bootstrap icons into a Laravel/VueJS application using NPM, according to the instructions here, https://icons.getbootstrap.com/. What is the next step?
If I want to use the svg element in a blade template, do I need to compile it with webpack? Do I import it into a css file?
And how do I use it in single file VueJS components?
I am able to install bootstrap icons version 1.5.0 to Laravel 8 project and using laravel mix, by following these steps.
run this to install bootstrap icons into your project
npm i bootstrap-icons
add this to resources\sass\app.scss
#import '~bootstrap-icons/font/bootstrap-icons';
check webpack.mix.js file has this
mix.sass('resources/sass/app.scss', 'public/css')
run this to compile your change to public folder
npm run dev
then you can use icons anywhere in the page (either .blade or .vue file)
<i class="bi-alarm"></i>
Happy coding!!!
There is an error in the answer of mili, because if
#import '~bootstrap-icons/font/bootstrap-icons';
is included in resources\sass\app.scss then no #font-face directive is included in my app.css file when building with npm run dev. To make appear the directive I had to add the «css» extension so the correct #import would be:
#import '~bootstrap-icons/font/bootstrap-icons.css';
But there is another problem, in this case a problem of the builder, that produces that the icons are not showed by the browser (instead appear an square meaning that the broswer could not render the svg icon). The builder generates the following directive in public/css/app.css
#font-face {
font-family: "bootstrap-icons";
src: url(/fonts/vendor/bootstrap-icons/bootstrap-icons.woff2?dfd0ea122577eb61795f175e0347fa2c) format("woff2"),
url(/fonts/vendor/bootstrap-icons/bootstrap-icons.woff?94eeade15e6b7fbed35b18ff32f0c112) format("woff");
}
Laravel does not find the files because url() does not understand the absolute path (in my development environment). If you add «..» before the two paths, then all works (the icons appear in the page):
#font-face {
font-family: "bootstrap-icons";
src: url(../fonts/vendor/bootstrap-icons/bootstrap-icons.woff2?dfd0ea122577eb61795f175e0347fa2c) format("woff2"),
url(../fonts/vendor/bootstrap-icons/bootstrap-icons.woff?94eeade15e6b7fbed35b18ff32f0c112) format("woff");
}
The problem is that every time that you run npm run dev for any other package, the ".." are automatically overwritten, so the icons are not seen any more.
I have seen other people out there with the same problem, but I do not know where should be notified the issue and the solution. I will try to find a feedback window in https://getbootstrap.com/
Install Bootstrap in your Node.js powered apps with the npm package:
Copynpm install bootstrap
require('bootstrap') will load all of Bootstrap’s jQuery plugins onto the jQuery object.
After that use npm install bootstrap-icons to install bootstrap icons onto your project and include it in your app.js from node-modules.
After that, if npm run dev runs successfully, Then add the SVG element in your Vue components.
<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
For demo purposes
Q> If I want to use the svg element in a blade template, do I need to compile it with webpack? Do I import it into a css file?
Ans.> No, you need not to compile while using in blade provided you import all the bootstrap files such as js files and css files.
For me the problem was fixed removing in the webpack on the sass instruction :
.options({ processCssUrls: false })
There is no need to declare a font face.