web-dev-qa-db-ja.com

API結果を取得するときにSEF URLの壊れた画像リンク

Joomla 3.9.8の使用

リモートAPIからデータを取得するために fetch（）api を使用しています。 APIの結果が得られたら、html要素に表示します。

APIはさまざまな値を返します。これらの1つはurlです。このurlを画像srcに挿入する必要があります。これは通常かなり簡単ですが、Joomlaでこれを試すと、イメージsrcが書き換えられ、サイト名がプレフィックスされることに気付きました。これは、壊れた画像を引き起こしています。

コードを挿入するために、私は Sourcerer とカスタムhtmlモジュールを使用しています。

この問題を示すために、ストリップバックの例を作成しました。この例では random user api を使用しますが、ロジックはどのapiでも同じです。

私がsourcererを使用してカスタムhtmlモジュールに挿入しているコードは次のとおりです。

<script>
fetch("https://randomuser.me/api/")
    .then(response => response.json())
    .then(data => {
      var url = data.results[0].picture.large;
      console.log(url);
      // displays https://randomuser.me/api/portraits/men/47.jpg
      console.log('<img src=" '+url+' ">');
      // displays <img src="/example.com/ https://randomuser.me/api/portraits/men/47.jpg " >
})
</script>

url変数をコンソールに記録していますが、問題は明らかです。画像srcの前にドメイン名が付いています。

ここにフィドルがあります まったく同じコードを含み、結果は異なります。

プラグインを無効にすると>システム-SEFすべてが期待どおりに機能するため、Joomla SEF URLに問題があることはほぼ間違いありません。

私は 記事の説明 問題と、プラグインの順序を変更するなどのいくつかの可能なトラブルシューティング手順を読みましたが、nothinは機能しているようです。

うまくいけば、私がこれにかなり長い間取り組んできたので、誰かが助けてくれるといいのですが。

joomla-3.xjavascriptcustom-componentsefrestful-api
2
jonboy

だから…私は自分にとってこれを難しすぎました。

答えは、オープニングの直後に、コードにspaceがあったことですimg src="これにより、Joomla SEFプラグインがスペースのドメインURLにプレフィックスを付けるようになりました。

元のコード。

console.log('<img src=" '+url+' ">');

作業コード;

console.log('<img src="'+url+'">');

これにより他の誰かが数時間の作業を節約できることを願っています。

1
jonboy