Use field transclude in image, [img[{{!url}}]] not work, any way to fix it?

#1

I want to use the field transclude in the img tool. But not work, how to fix it?

Here is the code of my tiddler:


{{!!url}}

This image can show normally.
[img[https://github.com/woshichuanqilz/OriImg/raw/master/%E5%96%89%E5%92%99%E4%BE%A7%E9%9D%A2%E5%86%85%E9%83%A8%E5%9B%BE.jpg]]

This image cant be shown. 
[img[{{!!url}}]]

The url filed content is : https://github.com/woshichuanqilz/OriImg/raw/master/%E5%96%89%E5%92%99%E4%BE%A7%E9%9D%A2%E5%86%85%E9%83%A8%E5%9B%BE.jpg
#2

Look here go to the bottom and read about the use of _canonical_uri field.

#3

From the doc about [img []]:

If the image source is the title of an image tiddler then that tiddler is directly displayed. Otherwise it is interpreted as a URL and an HTML <img> tag is generated with the src attribute containing the URL.

In your case, {{!!url}} is neither a tiddler name nor a url, so it does not work. You can use the html tag <img> directly.

<img src={{!!url}} />
2 Likes
#4

Create tiddler in this format will be the easiest way :

_canonical_uri: https://github.com/woshichuanqilz/OriImg/raw/master/%E5%96%89%E5%92%99%E4%BE%A7%E9%9D%A2%E5%86%85%E9%83%A8%E5%9B%BE.jpg
created: 20211011095523107
modified: 20211011095817980
tags: 
title: gogo
tmap.id: 205da847-d291-400f-a8ba-e0ab8eb7b57c
type: image/jpeg
#5

@Pak: Thanks for reminding us about the full <img> tag (which I’m noticing only now, a year later, after a search on related questions).

After all, invoking the _canonical_uri field takes over a whole tiddler’s behavior, and in some cases, dedicating a separate tiddler to each desired image is noisy and inefficient.

For example, imagine a whole set of book tiddlers, each of which has a single corresponding cover image online, which will generally be referenced only by that same tiddler.

Being able to paste the bare url into an image-url field right in that same tiddler is very convenient, and still permits us to apply style flexibly through templates using the <img> tag approach.

(I am embarrassed to admit I had previously settled for putting the whole styled [img[...]] markup into a field, after bumping up against the same problem as @Ori and failing to consider an html-tag solution. This meant that a style-change decision, such as wanting all those cover images to float right, would involve editing the relevant field in each affected tiddler. :roll_eyes:)

-Springer