I like to display images in a content in vue. The content ist stored in the db.
I use vue-auth-image
If i put the code <img v-auth-image="api/media/1"> in to the template section, it works well.
But whit the following code, it doesn't work:
<div v-html="issue.body" >
</div>
The response from the ajax call is "body": "<img src='api/media/17'>",
How can i display the image in the content?
Related
I am saving some images which created & upload by CKEditor in my Laravel application and it getting saved properly. But when I want to edit the content, sometimes I am getting the content from DB and load it into CKEditor.
But Most of the cases, the page loading & loading ..... And The content not loads. Sometimes loads properly, but see the string as the attached image below.
How to solve this error!!
<textarea name="long_desc" class="form-control" id="summernote" rows="20">{{ $portfolio_data->long_desc}}</textarea>
<textarea name="long_desc" class="form-control" id="summernote" rows="20">{{ $portfolio_data->long_desc}}</textarea>
you can use {!! !!} for loading page content in blade engine in laravel instead of {{ }}
write like this:
<textarea name="long_desc" class="form-control" id="summernote" rows="20">{!! $portfolio_data->long_desc !!}</textarea>
I want to style some text from an object property in an array, therefore I use v-html. But when I insert a picture with these syntaxs, it doesn't work.
<img :src="#/assets/image.png" alt="image description">
//or this
<img :src="require('#/assets/image.png') alt="image description'">
//or this
<img src="#/assets/image.png" alt="image description">
What's the correct way to do it?
v-html will render value as HTML without any change in the browser.
So you can't pass vue or javascript code (:src="#/assets/image.png") to this.
From the documentation:
the contents are inserted as plain HTML - they will not be compiled as Vue templates
<img src="#/assets/image.png" alt="image description">
This is correct, if the image is not loading then you have not put it in the correct directory.
#/assets are loaded from src/assets and the compiler optimizes and builds them out to public dir.
It is an alias:
# = src
I am building a web app using vue. I am trying to load images of a strapi cms that I am running and include them via an v-for loop in my component.
When setting the :src for an image, vue always includes the local server that my vue app is running on at the beginning. How do I get around that, so that I can reach the CMS on another port?
I tried different methods of binding the source, including "v-bind:src", ":src", ":src="require()""
<div class="images">
<template v-for="(Image, index) in Images">
<p v-bind:key="index">{{Image.Image_URL}}</p>
<img v-bind:key="index" :src="Image.Image_URL" :v-bind:alt="Image.Titel">
</template>
</div>
Output of one of the json objects.
Date: "24.04.2019",
Place: "Beijing, China",
Id: 2,
Image_URL: "http:/localhost:1337/uploads/ca472ad50d814fbb963e8b5a5b12742d.jpg",
Title: "Lights"
I get the image url in a json object. The final url, which is represented here as "Image.Image_URL" is something like: "localhost:1337/uploads/ca472ad50d814fbb963e8b5a5b12742d.jpg". Until now the image src is always get "http://localhost:8080/localhost:1337/uploads/ca472ad50d814fbb963e8b5a5b12742d.jpg" in Vue.
Thanks guys
You are missing one more slash in http:/localhost:1337/uploads/ca472ad50d814fbb963e8b5a5b12742d.jpg, should be http://
I have a partial view rendered with an Html.Action() that I want to refresh on a button click. I've tried AJAX requests, but the data I'm passing back and forth exceeds the maximum length for JSON.
The basic structure of the page looks like:
<html>
<head>
...
</head>
<body>
<div>
#Html.Action("DisplayBox")
</div>
<div>
<input type="button" id="RefreshButton" value="Refresh Box" />
</div>
</body>
</html>
The reason why I'm asking for a method other than an AJAX request is that the partial I'm rendering is a PDF object:
#model byte[]
#{
String base64EncodedPDF = System.Convert.ToBase64String(Model);
Layout = null;
}
<object data="data:application/pdf;base64,#base64EncodedPDF"
width="900" height="900" type="application/pdf"></object>
Thus, the data passed to the partial view for rendering is too big to put in an AJAX request. On button click, I want to be able to execute the controller action and have the results update the partial with new data. Is there any way of doing this?
You have to load the HTML with the link to the controller that generate the PDF or generate the file on the server side, host it and return the URL of this PDF, then, javascript can redirect user to that file.
I don't think that returning file trough AJAX is really not a good practice!
I am trying to use the combobox provided by Dijit inside of a custom-made widget. I have been using Dojo's tutorial on comboboxes to guide me.
When I implement a stand-alone webpage similar to their tutorial examples, everything worked fine; but when I ported the code into my custom-made widget, it just renders the combobox as a plain HTML text box.
Here's what my custom widget's template looks like:
<div class='customWidget'>
...
<div dojoAttachPoint="mainDiv" class="mainDiv">
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" url="states.txt"></div>
<input dojoType="dijit.form.ComboBox"
store="stateStore"
value="California"
searchAttr="name"
name="state2" />
<button dojoAttachEvent="onclick:chooseState">OK</button>
</div>
...
</div>
In the widget code, I require the combobox and read store:
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");
I also tried putting these includes in a <script/> within the custom widget (similar to the way they do it in the tutorial), but it didn't work (in fact, it appears as if the script tag wasn't even evaluated, since I couldn't reference a function I declared inside of it!)
Do you have widgetsInTemplate in your widget declaration?
dojo.declare('my.widget.Cool',[ dijit._Widget, dijit._Templated ], {
widgetsInTemplate: true,
// rest of widget JS here
});
Here's an article about including other widgets in your template.
Have you tried adding:
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.addOnLoad(function(){
dojo.parser.parse();
});
</script>
(from Dojocampus) to ensure Dojo is parsing the page? Are there any errors in your Javascript console? Is the page rendering any normal Dojo widgets?