How to display images in meteor - javascript

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.

Related

Module not found: Can't resolve 'Umma.PNG' in 'C:\Users\Zaid Mohammed\Ummanetic\ummanetic\src'

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"

Reference local img in reactjs

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

error with my img src using react, photo is not displaying

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

Building out multiple src and href from the text of an element on the page (best method)

I've just finished a function that works, but I'm wondering if it's the best way.
My goal is to have the text in an h2.product-title add into both src paths of images and the href of a button to build out the complete path that matches what's on disk already—saving me time from manually linking assets. So when I duplicate a page and change out the text of the h2, the assets point to the right place.
Here is the html from the page:
<h2 class="product-title">Darth Vader</h2>
<img class="product-image" src="images/placeholder/preview-01.jpg">
<img class="product-image" src="images/placeholder/preview-02.jpg">
<img class="product-image" src="images/placeholder/preview-03.jpg">
<img class="product-image" src="images/placeholder/preview-04.jpg">
<p><a class="product-download" href="#">Download</a>
Inside "images", I have a "placeholder" folder and also a "products" folder. I have each product name in its own folder inside products. The placeholder folder is just for me to see temp images while building.
The folder structure is like this:
images/products/darth-vader/preview-01.jpg, ...
images/products/bespin-luke-skywalker/preview-01.jpg, ...
images/products/jabba-tha-hutt/preview-01.jpg, ...
And my javascript:
$(document).foundation();
$(function() {
var str = $(".product-title").text();
str = str.replace(/\s+/g, "-").toLowerCase();
$(".product-image").attr("src",function(index,attr){
return attr.replace("images/placeholder", "images/products/" + str );
});
$(".product-download").attr("href", "images/products/" + str + "/download.zip");
});
Is this the right way to go about this? The downside to this is that I briefly see the placeholder image load before the actual image changed via js.
PS: I'm using a system that doesn't allow server-side scripting, so Javascript is the only thing I can do to modify the DOM.

How to Load local images in Angular JS?

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';

Categories