I am receiving data from a json file where each object has following data about a show/musical :
{
"Theatre": [
{
"name": "Hairspray",
"type": "Musical",
"role": "Dynamite",
"director": "Sue Ellen Nielson",
"company": "Stage 1 / East Bay Area",
"year": "2012",
"posterImage" : "hairsprayPoster.jpg"
} .....
]
}
on the Vue file I have :
<ul class="show-gallery-list">
<li v-for="dataItem in myJson['Theatre']" >
{{dataItem.coverImage}} //this prints the path as a string
<img :src="dataItem.coverImage"> //this renders an empty image icon
</li>
</ul>
All the other data is accessible and renders.
I have tried everything with v-bind:src
I have tried to import the folder of images but that doesn't work either.
Will parcel not allow for me to render an image dynamically?
Do I have to import all images ?
Is this a bundling issue ?
This is actually not that straight forward to with parcelJS there is a whole GitHub issue conversation which discusses the possible alternatives to getting around this problem
The most promising from a glance appeared to be this plugin
A more naive way of achieving this would be to run your parcel build, then, create a new directory in the build files and copy over all your static assets there. If you run your parcel build folder from a HTTP server, your static files will also be there in the folder you created. You just need to make sure your path is correctly constructed.
Related
Good afternoon!
I am working on a project that has displaying images of the national parks. I have called the National Parks api and get back an array of all the national parks in the database. But I am trying to display the image using the URL provided that is currently embedded in the object in an array of objects marked 'images'.
images-array
This is my code in Vue.js:
<template>
<ul class="list">
<li v-for="park in parks" :key="park.parkCode" >
<img :src="park.images[0].url"/>
<h4>{{park.name}}</h4>
</li>
</ul>
</template>
But every time I run it, I get this error...
Error in render: "TypeError: Cannot read property 'url' of undefined"
I know it is probably something stupid simple, but my brain can't seem to figure it out.
Thank you in advance!
You should check the response.
If park object includes images like
{ ..., "images" : ['image.png','image2.png], ...}
you should try park.images[0]
if it looks like
{ ..., "images" : [{'url':'image.png'},{'url':'image2.png'}], ...}
it should be ok.
Is there a way to check in a blade view if an image is really there or not?
I need to show results from a search box.
The results are many boxes with infos and a picture for each box.
The point is in my DB I store links to images that are on remote servers and also name of images that are stored locally.
So what I am doing is check if the file exists locally and if so use it and if not look on the remote server (if the picture data is not NULL it's either there or in a remote server).
I was trying to check if file exists using curl and it works but for big collections it takes too much time to finally spit the data to the view (every link has to be checked).
So what I want to do, if possible, is check directly in the blade view if the picture is not broken (404) and if so replace with an "image-not-found.png" I store locally. How can I do that?
I usually handle this with JavaScript using the img tag's onerror event. Typically I add a few more bells and whistles to the solution but this is it in a nutshell.
Plan JavaScript
function loadNextImage(id,uri){
document.getElementById(id).src = uri;
}
Plain HTML
<img src="http://local/image.jpg"
onerror="loadNextImage('image1', 'http://remote/imae.jpg'));"
id='image1' />
VueJS and Webpack
<template>
<img :src="local_url" #error="imgOnError()" ref="image"/>
</template>
<script>
export default{
name: 'Thumbnail',
props: {
local_url: String,
remote_url: String
},
methods: {
imgOnError: function (e) {
this.$refs.image.src = this.remote_url
}
}
}
</script>
You can use the func "file_get_contents" inside a try-catch block. I know i not the best way, but i could work for you.
Tray this (no the best way):
<?php
try{
$img = 'myproject.dev/image.jpg';
$test_img = file_get_contents($img);
echo "<img src='{$img}'>";
}catch(Exception $e){
echo "<img src='img/no-img.jpg'>";
}
?>
hey guys shorty question: i'm using the GUI components of element.eleme.io http://element.eleme.io/#/en-US/component/select
my problem now is, when i try to make a custom option template and want to display the user name, in the console log i get error "Cannot read property 'name' but when i put out the data of user, it shows all properties.
here is the code snippet:
<el-select v-model="filterUsersPostData.user"
remote
placeholder="Select"
:remote-method="searchUsers"
#change="changeUser"
id="assigned-user">
<el-option
v-for="user in filterUsers"
:label="user.name"
:value="user.id">
<pre>#{{ user }}</pre>
<span><img :src="user.image" />#{{ user.name }}</span>
</el-option>
</el-select>
the image src is rendered correctly allthough it is also called through user.image. the # in front of the {{ is because i'm using it in Laravel.
the objects look like:
{
"id": "2205c9525f86571eff1716ec3af734b4",
"name": "Joen Doe",
"image": "/media/502e43ad71e844b0d502bc9ac60816eb/img/users/2205c9525f86571eff1716ec3af734b4/jon-doe.jpg"
}
Thanks for any help!
I have a Laravel 5.3 app and using vue-multiselect (Version 2.0.0-beta13) for displaying multiple selects. The select's options are fetched via an AJAX GET call to a given route (shortened for readability).
[
{
"address1": "-",
"address2": "-",
"city": "-",
"company": "-",
"id": 0
},
{
"address1": "Adresse 1 und so",
"address2": "",
"city": "Wien",
"company": "Abernathy company",
"id": 27
}
]
This seems to be valid json, when inspecting with Chrome's network tab everything seems to be fine.
I have this Code in my Vue component:
<multiselect
v-model="companyIDs"
:allow-empty="true"
:value="selected"
:multiple="true"
:close-on-select="false"
:label="company"
:track-by="id"
:options="companies"
>
</multiselect>
And this is a screenhsot of how the options (companies) get shown in the select:
What's wrong here?
You just need to remove two : from your code, following should work:
<multiselect
v-model="companyIDs"
:allow-empty="true"
:value="selected"
:multiple="true"
:close-on-select="false"
label="company"
track-by="id"
:options="companies"
>
When you add : before an attribute: that is shortcut for v-bind and vue starts to expect that as vue data variable instead of simple string. As it seems you want it to be plain string and not a vue variable. so thats the root cause for the error.
I assume the options is the whole array of objects received as API response. If you want to show just company names, you have to pick out those before using them as values. But that is cumbersome and might feel like a hack and luckily, Vue-Multiselect authors have thought of that, so they have added features to use array of objects (documentation). The two options are label and track-by. What you did is use :track-by and :label, which is not the same thing and hence not recognized by the library.
Again, because you haven't explained what exactly are you trying to display, I'm assuming you only want to show object[i].company for each object in the list. In this case, you can add label="company" and track-by="id" to the component markup.
If you have more complicated logic of what you want to display as UI options, you'll have to map the array of objects received as API response into an array of strings which you want to display to the user.
I have a spring application which is using spring hateos which show the documents in the below format.
{
"_links" : {
"employee" : {
"href" : "http://localhost:8080/employee"
},
"address" : {
"href" : "http://localhost:8080/address"
},
"company" : {
"href" : "http://localhost:8080/company"
}
}
}
So is there any way we can make href link clickable so that rather than copying the resources link in new window and then accessing the resources instead of that we can directly click on the link and access the resource.
Please help on this
Understand that it is a JSON object, which is a plain JavaScript Object Notation and is generally evaluated within a JavaScript code only.
If you really want to make these links click-able in your browser then you need to render this JSON into your HTML. In other words, you need to take this JSON out of your javascript and bring it to HTML where you can add anchor <a> tags around it.
JSON2HTML is one of the templating library which can be of use to you.
Code snippet for your use below:
HTML
<ul id="list">
<li>Bob (40)</li>
<li>Frank (15)</li>
<li>Bill (65)</li>
<li>Robert (24)</li>
</ul>
And the script
var transform = {'tag':'li','html':'${name} (${age})'};
var data = [
{'name':'Bob','age':40},
{'name':'Frank','age':15},
{'name':'Bill','age':65},
{'name':'Robert','age':24}
];
json2html.transform(data,transform);