alt image routes

This commit is contained in:
hay-kot 2021-04-02 21:47:19 -08:00
commit 43dde43a7c
11 changed files with 29 additions and 18 deletions

View file

@ -85,4 +85,16 @@ export const recipeAPI = {
return response.data; return response.data;
}, },
recipeImage(recipeSlug) {
return `/api/recipes/${recipeSlug}/image?image_type=original`;
},
recipeSmallImage(recipeSlug) {
return `/api/recipes/${recipeSlug}/image?image_type=small`;
},
recipeTinyImage(recipeSlug) {
return `/api/recipes/${recipeSlug}/image?image_type=tiny`;
},
}; };

View file

@ -28,8 +28,8 @@
</template> </template>
<script> <script>
import utils from "@/utils";
import SearchDialog from "../UI/Search/SearchDialog"; import SearchDialog from "../UI/Search/SearchDialog";
import { api } from "@/api";
export default { export default {
components: { components: {
SearchDialog, SearchDialog,
@ -47,7 +47,7 @@ export default {
methods: { methods: {
getImage(slug) { getImage(slug) {
if (slug) { if (slug) {
return utils.getImageURL(slug); return api.recipes.recipeSmallImage(slug);
} }
}, },
setSlug(name, slug) { setSlug(name, slug) {

View file

@ -223,7 +223,7 @@ export default {
}, },
getImage(image) { getImage(image) {
return utils.getImageURL(image); return api.recipes.recipeSmallImage(image);
}, },
formatDate(date) { formatDate(date) {

View file

@ -25,7 +25,7 @@
</template> </template>
<script> <script>
import utils from "@/utils"; import { api } from "@/api";
export default { export default {
props: { props: {
name: String, name: String,
@ -40,7 +40,7 @@ export default {
methods: { methods: {
getImage(image) { getImage(image) {
return utils.getImageURL(image); return api.recipes.recipeSmallImage(image);
}, },
}, },
}; };

View file

@ -42,7 +42,7 @@
</template> </template>
<script> <script>
import utils from "@/utils"; import { api } from "@/api";
export default { export default {
props: { props: {
name: String, name: String,
@ -57,7 +57,7 @@ export default {
}, },
methods: { methods: {
getImage(image) { getImage(image) {
return utils.getImageURL(image); return api.recipes.recipeSmallImage(image);
}, },
}, },
}; };

View file

@ -162,6 +162,7 @@
<script> <script>
import utils from "@/utils"; import utils from "@/utils";
import { api } from "@/api";
export default { export default {
props: { props: {
@ -175,7 +176,7 @@ export default {
methods: { methods: {
getImage(image) { getImage(image) {
if (image) { if (image) {
return utils.getImageURL(image) + "?rnd=" + this.imageKey; return api.recipes.recipeImage(image) + "?rnd=" + this.imageKey;
} }
}, },
generateKey(item, index) { generateKey(item, index) {

View file

@ -54,7 +54,7 @@
<script> <script>
import Fuse from "fuse.js"; import Fuse from "fuse.js";
import utils from "@/utils"; import { api } from "@/api";
export default { export default {
props: { props: {
@ -151,7 +151,7 @@ export default {
); );
}, },
getImage(image) { getImage(image) {
return utils.getImageURL(image); return api.recipes.recipeTinyImage(image);
}, },
selected(slug, name) { selected(slug, name) {
this.$emit("selected", slug, name); this.$emit("selected", slug, name);

View file

@ -117,7 +117,7 @@ export default {
return utils.getDateAsTextAlt(dateObject); return utils.getDateAsTextAlt(dateObject);
}, },
getImage(image) { getImage(image) {
return utils.getImageURL(image); return api.recipes.recipeTinyImage(image);
}, },
editPlan(id) { editPlan(id) {

View file

@ -52,7 +52,6 @@
<script> <script>
import { api } from "@/api"; import { api } from "@/api";
import utils from "@/utils";
export default { export default {
data() { data() {
return { return {
@ -68,7 +67,7 @@ export default {
else return 0; else return 0;
}, },
getImage(image) { getImage(image) {
return utils.getImageURL(image); return api.recipes.recipeImage(image);
}, },
}, },
}; };

View file

@ -14,7 +14,7 @@
<v-card v-else id="myRecipe"> <v-card v-else id="myRecipe">
<v-img <v-img
height="400" height="400"
:src="getImage(recipeDetails.image)" :src="getImage(recipeDetails.slug)"
class="d-print-none" class="d-print-none"
:key="imageKey" :key="imageKey"
> >
@ -71,7 +71,6 @@
<script> <script>
import { api } from "@/api"; import { api } from "@/api";
import utils from "@/utils";
import VJsoneditor from "v-jsoneditor"; import VJsoneditor from "v-jsoneditor";
import RecipeViewer from "@/components/Recipe/RecipeViewer"; import RecipeViewer from "@/components/Recipe/RecipeViewer";
import RecipeEditor from "@/components/Recipe/RecipeEditor"; import RecipeEditor from "@/components/Recipe/RecipeEditor";
@ -160,7 +159,7 @@ export default {
}, },
getImage(image) { getImage(image) {
if (image) { if (image) {
return utils.getImageURL(image) + "?rnd=" + this.imageKey; return api.recipes.recipeImage(image) + "&rnd=" + this.imageKey;
} }
}, },
deleteRecipe() { deleteRecipe() {

View file

@ -50,7 +50,7 @@ const monthsShort = [
export default { export default {
getImageURL(image) { getImageURL(image) {
return `/api/recipes/${image}/image`; return `/api/recipes/${image}/image?image_type=small`;
}, },
generateUniqueKey(item, index) { generateUniqueKey(item, index) {
const uniqueKey = `${item}-${index}`; const uniqueKey = `${item}-${index}`;