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

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

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"

Image imported gets no SRC attribute while image required gets weird name

Following up a previous question, I discovered a few things. I'm using the following two references (to the same file).
var Image1 = require("../assets/author.png");
import Image2 from "../assets/author.png";
In the render() method I attempt create markup in two ways.
<img style={imgStyle} src={Image1} />
<img style={imgStyle} src={Image2} />
Contrary to my expectations, those render differently.
<img style="margin: 15px;" src="1e0cf4ef57ac9ab0521646ee9c657eae.png">
<img style="margin: 15px;">
I'm not sure what to make of it.
What is the guid that the filename has been transformed to? Can I control it? Should I tamper with it?
What happens to the src part from the markup? Can it simply disappear like that? What can I do about it?
I've added a file with TypeScript definition as shown below in order to make the software understand that it's a valid module type. Not entirely sure if it actually achieves that goal, though.
declare module "*.png" {
const value: any;
export default value;
}

Is it possible to concatenate an img src in React?

This might be a silly question but I'm trying to concatenate the source of an image in React to be rendered on the screen, but it's not working.
<img src=`https://www.cryptocompare.com/{this.state.cryImage}` />
In this.state.cryImage, I only get the second half of the link (I'm pulling data from an API) so for example it would be something like:
media/19633/btc.png
Am I concatenating incorrectly or is this just not possible?
You've missed $ sign and brackets for attribute
<img src={`https://www.cryptocompare.com/${this.state.cryImage}`} />
You forgot to add {} in src prop:
<img src={`https://www.cryptocompare.com/${this.state.cryImage}`} />

AngularJS: Load base64 image from a file

I have a list of images, but every image have a s3 file with his base64 encoded inside this file.
Example of image:
https://s3.eu-central-1.amazonaws.com/sensicityissues/1483573056505-61946
The problem is that if I did something like this:
<img src="https://s3.eu-central-1.amazonaws.com/sensicityissues/1483573056505-61946" />
The image is not loaded.
If I want that this works in this way I need to do something like this:
HTML:
<div ng-init="vm.loadImage(image, image.url)">
<img ng-if="image && image.src" data-ng-src="{{image.src}}" width="60" />
</div>
JS:
self.loadImage = (img, url) => {
$http.get(`http://cors.io/?${url}`)
.then(r => (img.src = r.data))
}
This is working... Okey... But I have 2 big problems with this:
CORS problems, that I need to resolve with http://cors.io/?${url}. For me is not a good solution because is a slowly way to load all the images and if some day cors.io stops working, my webpage neither will work...
If I load an amout of images with this way, all the base64 encoded strings are in memory and the page will have a several memory problems.
Is there another solution to implement this avoiding these big problems?
(I can't change how images are saved in s3...)
Thank you so much.
You can find an example on this fiddle. Also, on this question you can find out the way to load base64 images.
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
You can't mix http schema that gives you a non byte response as your src attribute value.
You gonna need to build a backend feature in order to serve you these images to your front end app through your own url.

How to replace multiple images with Javascript and change back

I've been working on trying to get these buttons to change when clicked - which now works, but now I need them to toggle between the on and off states when the user clicks (so they can turn the buttons on and off). I'm sure this is an easy fix, but I'm new to Javascript and I don't have anyone to bounce ideas off of.
<html>
<head>
<script type="text/javascript">
function changeimage(img, new_src)
{
var cur_src = img.src.substring(img.src.lastIndexOf("/")+1);
if (cur_src == new_src)
{
img.src = img.old_src;
}
else
{
img.old_src = cur_src;
img.src = new_src;
}
}
</script>
</head>
<body>
<img onclick="changeimage(this, 'images/buttonA_on.png')" src="images/buttonA_off.png" />
<img onclick="changeimage(this, 'images/buttonB_on.png')" src="images/buttonB_off.png" />
<img onclick="changeimage(this, 'images/buttonC_on.png')" src="images/buttonC_off.png" />
<img onclick="changeimage(this, 'images/buttonD_on.png')" src="images/buttonD_off.png" />
<img onclick="changeimage(this, 'images/buttonE_on.png')" src="images/buttonE_off.png" />
<img onclick="changeimage(this, 'images/buttonF_on.png')" src="images/buttonF_off.png" />
</body>
</html>
Much thanks!
When I started using JavaScript I wasted a bunch of time trying to do things that other libraries could easily take care of for me. A few months after that I discovered jQuery which has drastically reduced the amount of time I spend on front-end projects. All you have to do is include the jQuery file in an html project and you're good to go.
In jQuery, you can toggle a class on and off with one line. it looks something like this:
$('.toggleimage').toggleClass('on');
In the above example, '.toggleimage' is just a class I gave to a div, toggleClass is the jQuery command, and 'on' is the name of the class I want to toggle. This probably seems like greek right now, but I recommend going through codeschool's jQuery tutorials to get caught up. If you're thinking of doing serious web development... it's a crucial tool. Here is the full code:
link to full code on my Gist
In order to make it work, make sure you have the right file structure. Create a folder, then create the html file there. In addition, create three subfolders (one for css, one for images, one for scripts). The css folder holds your style.css, the images folder holds mario.jpg, and the scripts folder contains your jQuery file. You can substitute in any image you want, just make sure the changes are applied to style.css.
function changeImg(img) {
if ( img.src.indexOf("_off") > 0 ) {
img.src = img.src.replace("_off","_on");
}
else {
img.src = img.src.replace("_on","_off");
}
}
it will work if you have 50x2 different images, named "imgName1_uw.jpg", "img1_moored.jpg", "img2_uw.jpg", "img2_moored.jpg", etc.
may be its helps you

Categories