I cannot get images in the images folder in react - javascript

I'm trying to do a memory card game with react. I can't get the photos in the img folder to app.js.
I wrote the photos in appjs like this.
I have defined a url for pciture but the pictures are not visible.

smurf is Array, try this:
...
return smurfs.map(smurfData=>(
<img src={smurfData.pic} alt={smurfData.name}/>
));

<img src={require(`${url}/${smurf.id}.png`)} alt="smurf" width="100" />
You should be able to display it if the URL is correct.

could you check what your smurf.id holds? can't see it's definition in the code attached. also, seems from the part code that you want to do either smurf.name or smurf.pic?
Separately, this works for me
src={require('../images/flex.jpg')}
you're probably missing the 'require' if the image path seems correct to you

Related

Can't add img with vue

I don't know why this don't work, only the first one charge my img the others no.
1. <img :src="require('../assets/batatas.jpg')" :alt="item.title" />
2. <img :src="'../assets/batatas.jpg'" :alt="item.title" />
3. <img :src="item.img" :alt="item.title" />
I want to use the las one, because i use my own json to charge the iformation, but when I try to put the img only works the first one, in and when i watch the web info i can see the first put this (src="/img/batatas.79e29299.jpg") and the two others put (src="../assets/batatas.jpg") on my web.
I'm starting to use vue and i can't find why this happends.
Welcome to StackOverflow, please make sure you search for similar questions before asking yours. Is always nice to avoid duplicates.
Here it is one question/answer that is similar to yours:
Static image src in Vue.js template
You will need the "require" since your object is dynamic and Vue needs to figure out how to map the static asset with the one generated in the build process. That's the one (src="/img/batatas.79e29299.jpg") this random number is the actual end result of the image, that will be visible to the users.
Using the require will be like saying "convert the item.img URL to the actual end-result image URL"
I change my json to img: #/assets/batatas.jpg to img: batatas.jpg and then in my component i use <img :src="require('#/assets/' + item.img)" :alt="item.title" /> and this works for me, the cassioscabral answer helps me to understand and trying to my self with this info i solvent this question, thanks to all people who coment this post for help me, I'm really grateful.

jQuery change source of <img> tag

I have this script in my admin.blade.php file.
<img src="#" id="editThumbnail">
I want to change the source with JQuery. Here is my script.
var photo = data.user.photo;
$("#editThumbnail").attr("src","{{asset('profile-photos/"+photo+"')}}")
For example, photo variable has value "marc.jpg". But, the photo won't appear. Here is the error from the browser.
GET http://localhost:8000/profile-photos/$quot;+photo+" (404 Not Found)
I have no idea how is this happen. Anyone can help me?
Try using template strings concept of JavaScript
$("#editThumbnail").attr("src","{`asset('profile-photos/${photo}')`}")
Try something like the above.
Try this -
$("#editThumbnail").attr("src","<?php echo asset('profile-photos/') ?>photo");

vuejs v-html image tag not resolving src

I have a vue page which uses v-html to place an html content inside a <div> as follows:
<div v-html="noDataMessage">
</div>
And the data of noDataMessage is set in created() lifecycle hook of vue.
created() {
this.noDataMessage = "<img src='../assets/Content/img/Myfav_empty.png' width='35px' height='35px'>";
}
The html tag is showing properly, but it is not able to fetch the image.
I tried to load the image separately to see if image path is correct, and got the image.
Am I missing anything particular to vue.js or v-html in particular?
The issue is in the src url you are using, the src url root is the public directory.
For example, if you have all your images in public->images directory then your code will look like this:
this.noDataMessage = "<img src='images/Myfav_empty.png' width='35px' height='35px'>";
It seems perfect only.
I have implemented the same way to fetch the image, Here I can see the image.
Please check the path once again.
You can check below example where I have tried to implement same way
:http://jsfiddle.net/suprabhasupi/eywraw8t/491005/

Retrieve proper path for dynamic image src assignment

I understand that there are similar questions out there, but none of them seem to work properly for me. I have a slider and an image. When I change the value of the slider, I want the image to change as well. Here are the relevant pieces of javascript:
var imageArray = ['face0.png',
'face1.png',
'face1.png',
'face2.png',
'face2.png',
'face3.png',
'face3.png',
'face4.png',
'face4.png',
'face5.png',
'face5.png'];
function sliderValueChange(value) {
//$('#painScaleImage').attr('src', '~/Content/' + imageArray[value]); ***gets wrong path
//$('#painScaleImage').src('~/Content/' + imageArray[value]); ***jQuery has no method called .src()
//document.getElementById('painScaleImage').src = '~/Content/' + imageArray[value]; ***gets wrong path
//these are commented out because they all failed to work
}
My images are located in my project under Content/face0.png, Content/face1.png, etc. My Views are located in Views/Home/view.cshtml. The problem is that when I called the $(...).attr() and document.getElementById(...).src functions, the browser looked for the images under /Home/~/Content/face0.png instead of looking under Content/face0.png. The reason I assumed I could use ~/Content/face0.png is because if I were to declare the images in html, this would get the image in the right place <img src="~/Content/face0.png" />. How can I properly achieve what I am trying to do? What is going wrong?
Got it, root relative paths were the correct answer for my solution.
(start the path with a /).

jQuery's load() doesn't display images

Good evening everyone,
I am using a JavaScript to load/override content from an HTML-File into specified divs.
You can watch a demo.
The javascript that does the load job looks like the following:
function loadScreenie(elementSelector, sourceURL) {
$(""+elementSelector+"").load("img/screenies/"+sourceURL+"");
}
and gets invoked by a hyperlink looking like this:
mibmib
( i have also tried the same with onclick="")
This is the content of screenie2.htm
hello world<br />
<img src="screenie2.png" />
The problem is that images are not displayed. The behaviour is like this:
- you click the link and the javascript is executed.
- the text in screenie2.htm is displayed correctly in the correct div
- the image is not displayed. there also isnt any broken image symbol or an empty space.
Do you have an idea what could cause this error?
Thanks a lot in advance,
-- benny
Ok. Let me conclude to you what is happening here.
When link is clicked, jQuery loads "img/screenies/screenie2.htm
The image-tag <img src="screenie2.png" /> is inserted into the DOM.
So, we have an image linking to a supposed image at ./screenie2.png, where you would believe it should be linking to *./**img/screenies/**screenie2.png*.
You need to use absolute URLs in your load():ed content.
If you're testing with IE, the problem might be that Jquery uses innerHTML instead of creating individual dom elements with the load command. IE can be very finicky about that.

Categories