Here is my path to the image: ../src/assets/images/img_name.jpg"
And path to the file.js: src/file_name.js
If I implement my code in file.js like this:
Import img_name from "../src/assets/images/img_name.jpg"
Then reference the img path in href tag: <img src={img_name}></img>
It will work but If I dont import and reference the img like this: <img src='../src/assets/images/img_name.jpg'></img>
It won't work no more. Can anyone explain why??
I use create-react-app
you have to explictly import image file since webpack need proper loader for this file
Related
I am trying to import an image from the source file "Umma.PNG" , on the code if you hover the cursor on the link it shows the image however on the executable page its returning this error ./src/Header.js
Module not found: Can't resolve 'Umma.PNG' in 'C:\Users\Zaid Mohammed\Ummanetic\ummanetic\src'
Can anyone help me insert the image
You cannot assign the files directly(as a static link). You need to import it like an file or library.
import MyImage from './where/is/image/path/umma.png'
And you can use it like below:
<img src={MyImage} alt="its an image" />
The image should be imported with the full path.
eg: "../../image/umma.png"
I keep having difficulty trying to render out images onto my site. I've tried several ways to return my img src such as:
1. <img src={require('../../blogPostImages/' + post.blogImage)}
alt="Post Image"/>
2. <img src={require(`../../blogPostImages/${post.blogImage}`)} alt="Post Image" />
3.<img src={'../../blogPostImages/' + post.blogImage'} />
I had a similar issue before, and I imported the image at the top of the file and it worked. I tried doing the same thing this time and it's not working. This is what I am trying to import:
import Img from '../../blogPostImages/' + post.blogImage;
and returning the import as:
I feel like I my directory is correct, I am currently in my blogPost>index.js trying to access my blogPostImages. Thanks for the help in advanced!
Directory
Broken image icon
I want to dynamically resize an image map. I only found a solution for jQuery (https://github.com/stowball/jQuery-rwdImageMaps)
How can I realize this in Angular?
you can use https://github.com/davidjbradshaw/image-map-resizer
It works with javascript call :
sample
in HTML :
<img src="...." width="100%" usemap="#usaMap" (load)="imageResized();">
in TS :
declare function imageMapResize(): void;
#Component({...
})
...
imageResized() {
imageMapResize(); // Javascript function in imageMapResizer.min.js
}
Previous answer works, however, you have to download the imageMapResizer.min.js into the assets folder.
Then, you should import it in the index.html file like this:
<script src="./assets/imageMapResizer.min.js"></script>
I thought that the file should be imported in the angular.json file, but it didn't work ... index.html did the trick for me.
I am writing my code in (root-directory)/imports/ui/body.html and i have an img src tag there which is not working. After searching on the internet found out that we have to store assets in the public folder.After doing so , still i cannot get the image to be displayed.But when i use the image tag in client/main.html i am able to see the image , but not when i add the img src in body.html in imports/ui.
i have tried:
< img src="../../img.jpg" >
< img src="../../client/img.jpg" >
If path for your images are root/app/public/img.jpg and root/app/public/client/img.jpg, the use this to access them:
<img src="/img.jpg" />
<img src="/client/img.jpg" />
Create a folder named "public" in the root directory of your app. Paths in your code will use this folder as the root directory. So putting your image file directly in "public" and accessing it using '/img.jpg' should work.
I am just starting with AngulerJs and I want to load a image from a sub-folder.
This is my controller code:.
$scope.img_source = "../WebContent/Welcom2Iquote.gif";
This is the code in my index.html:
<img ng-src="{{img_source}}"/>
You can do like this
$scope.img_source = "../WebContent/Welcom2Iquote.gif";
if this your scope variable of the image path you can bind the image like below in your html using ng-src
<img ng-src="{{ img_source }}" />
Use the image tag as you used to place image for normal html images
<img ng-src="../assets/img/{{img_source}}" alt="img_source" title="img_source">
If you're using the angular-cli, you should have an assets folder in your solution.
Drop in the image you want to load, into this folder.
Now on the whatever-component.html page insert this line
<img src="assets/{{img_source}}" alt="img_source" title="img_source">
The {{}} requires you to define the img_source in the typescript file corresponding to the whatever-component.html file.
So define the the name of the picture over there:
public img_source: string = 'yourpicture.jpg';