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>
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 try to use #nuxt/image with image from assets folder; when using image from static folder or external url, the image is optimised as well; but when on using it on image from assets like below:
<nuxt-img
src="~assets/img/Icone-accueil/row_left.svg"
alt=""
class="float-left margin-fleche"
quality="30"
/>
I have this result in my html
<img src="/_ipx/q_30/_nuxt/assets/img/Icone-accueil/row_left.svg" alt="" class="float-left margin-fleche">
but the image doesn't appear
Using #nuxt/image with images from the assets/ folder does not work.
The following is from the #nuxt/image documentation:
Images should be stored in the static/ directory of your project.
For example, when using <nuxt-img src="/nuxt-icon.png" />, it should
be placed in static/ folder under the path static/nuxt-icon.png.
Image stored in the assets/ directory are not proccessed with Nuxt
Image because those images are managed by webpack.
From nuxt documentation:
Inside your vue templates, if you need to link to your assets
directory use ~/assets/your_image.png with a slash before assets.
In your case:
<nuxt-img
src="~/assets/img/Icone-accueil/row_left.svg"
alt=""
class="float-left margin-fleche"
quality="30"
/>
Another quote from nuxt:
When working with dynamic images you will need to use require
<img :src="require(`~/assets/img/${image}.jpg`)" />
In your case check this out:
<nuxt-img
:src="require(`~/assets/img/Icone_accueil/row_left.svg`)"
alt=""
class="float-left margin-fleche"
quality="30"
/>
As per Nuxt Image doc, default direcrtory for images is /static, you can change it by update nuxt.config file as below.
e.g,
image: {
dir: 'assets/images',
},
Now you can rewrite as,
<nuxt-img
src="/Icone-accueil/row_left.svg"
alt=""
class="float-left margin-fleche"
quality="30"
/>
This worked for me:
< img :src="require (~/assets/image.jpeg)"
alt=""
/>
For Nuxt3 users whom are using the edge version, which is v1, of nuxt/image,
if you are self-hosting, place images in the 'public' directory as opposed to 'static'.
Quote from v1 docs:
With default provider, you should put /nuxt-icon.png inside public/ directory for >Nuxt 3 make the above example work.
v0 (Nuxt2)
/static/images/myImage.jpg
v1 (Nuxt3)
/public/images/myImage.jpg
Then, access images in the same way others have described. Nuxt/image v1 does not seem able to read a dir named static and of course doesn't read assets as that is used by Webpack.
I need to load the image coming from the markdown metadata
---
title: 'First Blog'
description: 'First blog description'
image: ../../common/src/assets/image/image.png
author: 'Stack'
---
When i pass this to my code the and inspect the browser, the image src is just the path below. it's not converting to the static/... as usual for the other images
<img src={post.frontmatter.image} />
How do i get this fixed without using any plugins like next-images. Thanks for the help
Nextjs can serve images under a folder called public in your root directory.
Add a folder to your root call it "public" and Add your assets to it
EXAMPLE:
public
--common
----src
------assets
--------image
----------image.png
---
image: "/common/src/assets/image/image.png"
---
---
<img src={post.frontmatter.image} />
---
Nextjs will take care of the rest for you.
More on Static File Serving
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/
where do you copy the image in order for the following commands to work?
<b-img :src="require('../static/picture.jpg')" />
<b-card-img :img-src="require('../static/picture.jpg')" />
I got the following code from the vue bootstrap website Vue Bootstrap
I wanted to try this out instead of making a lot of changes to the transformToRequire option.
partial directory layout for a vue project:
myProject | src | components (.vue files located in components directory)
Path are relative to the file where you write your require.
So lets says the your script is in ./src/components/myComp.vue your file would be lookup in ./src/static/picture.jpg
The purpose of transformToRequire is not to manage asset location although it might issue error if path is not set properly. transformToRequire is only a syntactic sugar from src="..." to src="require(...)" and let webpack do the rest.
There is also an alternative if you don't want to border where your file is, especially when your are moving file around.
In webpack you set an alias for some path typically:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src')
}
},
So that you can use:
<b-img :src="require(#/static/picture.jpg)" />
Based on the structure you gave, you would have a static folder in src where you put your images.
But do note that require is relative to the currently file.