1

So I have created an image in html and tried to give it the property v-bind:src.

This is the line of code:

<img class="summonericon" ref="summonerIcon" v-bind:src="summonerRequests.profileIcon">

summonerRequests.profileIcon is a variable I saved using a coldfusion function:

<cffunction name="getSummonerByName" access="remote" returntype="string" returnformat="JSON">
    <cfargument name="summonerName" required="true" type="string">
    <cfargument name="region" required="true" type="string">

    <cfset requesturl = "https://" & lCase(region) & "1.api.riotgames.com/lol/summoner/v4/summoners/by-name/" & summonerName & "?api_key=" & api_key>

    <cfhttp 
        method="get"
        url="#requesturl#" result="SummonerDTOJson">
        <cfhttpparam name="content-type" value="application/json" type="header">
        <cfhttpparam name="accept" value="application/json" type="header">
    </cfhttp>

    <cfset summonerDTO=deserializeJSON(SummonerDTOJson.filecontent)>
    <cfset client.profileIcon
    ="https://raw.communitydragon.org/pbe/plugins/rcp-be-lol-game-data/global/default/v1/profile-icons/" & summonerDTO.profileIconId & ".jpg">
    <cfreturn serializeJSON(summonerDTO)>
</cffunction>

Although the image url exists, I can't make it to set the source of the image. I really need help, thanks for any help.

rrk
  • 15,677
  • 4
  • 29
  • 45
Proudyy
  • 57
  • 5
  • 3
    The variable must be enclosed in # signs so it is evaluated, ie #summonerRequests.profileIcon# ... and the img tag must be inside cfouput/writeOutput if it isn't already. – SOS Oct 15 '20 at 03:57
  • This covers a lot of what you are looking for on both ColdFusion and VueJS: https://stackoverflow.com/questions/50166804/v-card-media-with-base64-image – James A Mohler Oct 15 '20 at 16:03
  • @SOS the `` tag is a VueJS element, not a ColdFusion – James A Mohler Oct 15 '20 at 16:21
  • @Proudyy How is VueJS loading summonerRequests? If this is done via AJAX, did you look at the AJAX data to see if you got what you wanted? He need to figure out if this is a VueJS problem or a ColdFusion problem. – James A Mohler Oct 16 '20 at 04:04

0 Answers0