We Keep Coding

<img> tag is not pulling up the image passed as props

I created one data file and I added Img name as one object.
[data.js]: https://i.stack.imgur.com/qG385.png
In fact, these images are also stored in the Image folder of my project.
But when I pass this data through Component as props, the image is not loading up -
[Props data]: https://i.stack.imgur.com/AHByK.png
[Props]: https://i.stack.imgur.com/66Jqk.png
Console also shows that the Img data is getting pulled correctly!
[Console]: https://i.stack.imgur.com/5Pkbt.png
If I manually enter img address under src the img gets pulled properly. Why I am not able to use it using props?

In React, image tags are a bit different. This isn’t really React’s fault, but more a problem of where the images will reside on the server after the app is built.
Two Ways to Include an Image in a React Component
With React, since there’s a build step, you need a way to include the image. There are 2 main ways to do that.
Option 1: import the image into the component
Put the image file somewhere under the src folder. This alone will not automatically make it available, so you have to import the image into the React component where you’re using it.
Wherever you want to display the image, render your img tag and pass that variable as the src:
import katie from "../../Images/katie-zaferes.png";
function ImageExample () {
return <img src={katie} alt="Katie profile" />
}
Option 2: Put the image in the public directory
You can put the image file in the public folder (or if this is not Create React App… then any folder that will be copied to the server).
Then, assuming your server is treating the public folder as the “root” directory (/), then your images will be available relative to that – just like with plain HTML.
So if you had an image at public/images/wedding-photography.png, you could display that image this way:
function Home() {
return (
<div>
<img src="images/wedding-photography.png" alt="Wedding photography example"/>
</div>
);
}

vue v-for image not showing. instead it shows string

I want to show the image of the corresponding user in my table. But when i do a v-for it only shows the image name in a string format in the table. How could i show the image rather than the text itself? Because in laravel blade i can do a foreach loop and it shows the image directly. What should I do? Thanks a lot
My table
My axios code and v-for
<tr v-for="teacher in teachers" :key="teacher.id">
<td>{{teacher.id}}</td>
<td>{{teacher.image}}</td>
</tr>
methods:{
getTeachers(){
axios.get('getTeachers')
.then((res)=>{
this.teachers = res.data
})
.catch((e)=>{
console.log(e)
})
}
}

You need to add an image tag and then provide the full path of the image as source. For example:
<img :src="'/path/to/images/folder/'+teacher.image">
If you are using Laravel's inbuilt storage, I recommend that you should return the full path of the image from your controller, i.e. use Storage::url() to get the full URL for the image.

You need to wrap the image url inside appropriate HTML tag.
Something in the lines of:
<img :src="teacher.image">
When doign this you are adding image into your HTML page and syntax ':src' is used to bind the html attribute 'src' with vue variable (in this case your image link/name).
If the image is not showing after that your link is invalid. Check the image url, and see if you can get it directly from the browser. If server is not returning appropriate image at that url than it will not work. Use 'alt' attribute to set text instead of image to see if this is happening.

The issue is the way you saved your image. you saved the only image name in database, not the path. whenever you upload something via form in laravel. it keeps the file in public/storage.
Run the command first
php artisan storage:link
heres what you can do. use below code to save your image in db when you submitting form( i assume you are registering teachers in the system )
after that your image column will contain the total path of your image.
if(!empty($request->file('image_file'))){
$path = storage_path('public/teacher-images/');
if(!File::isDirectory($path)){
File::makeDirectory($path, 0755, true, true);
}
$image_path = Storage::disk('public')->put('teacher-images', $request->file('image_file'));
$teacher->image = isset($image_path) ? "storage/".$image_path : "";
}
after that you can use that picture to show on your template by appending serverurl

You are trying to show an image, therefore, you should use:
<img v-bind:src="teacher.image" />

Your server cannot find your image only the file name. So I recommend you to pass full path of your image link from controller. using asset() / Storage::url() .
its good way.

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/

Display image when src attribute is a file not a url

I am using a content script in my chrome extension that gets the src attributes (from several images from the user's active tab) in order to display them in my popup HTML file that is displayed when a browser action is clicked. Certain images that I need to display use src values that are paths to local files.
Example:
src = "/image/17_x.px?wid=450&hei=500&bgcolor=xxx...etc"
the src starts with a "/", has a brief identifier denoted by "17_x", followed by various attributes of the image. Also itemprop = "image" is set on these image elements. The "xxxx...etc" is just showing that other attributes and values are listed in the src
When I create a new image element with this "local" src, the desired image is not displayed in my popup html file. Is there another way that I can use this image data to display the image within my extension?

Cause: element.getAttribute("src") or $(...).attr("src") return the original html markup.
Solution: use DOM property instead element.src or $(...)[0].src to return a full URL.

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 /).