I'm creating a web application and trying to display uploaded rich text content by using vue.js. The rich text content is created by Action Text, and the format is as shown below.

<h1>text</h1><div>sample text<br><action-text-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSI3Z2lkOi8vZWxvb3AtcmljaC9BY3RpdmVTdG9yYWdlOjpCbG9iLzEzP2V4cGlyZXNfaW4GOwBUSSIMcHVycG9zZQY7AFRJIg9hdHRhY2hhYmxlBjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--36dd18a0ed30ace4bc8442849d9dd3355bc86443" content-type="image/png" url="http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e887e47b082a537f647284bc0bfb6b6216f51216/deal.png" filename="deal.png" filesize="10394" width="256" height="256" presentation="gallery"></action-text-attachment></div>

I tried to display the content like this in vue.js file.

<div v-html=""></div>

Then, texts are properly displayed, but images are not displayed. How can I solve it?

I'm creating a web application and trying to display uploaded rich text content by using vue.js. The rich text content is created by Action Text, and the format is as shown below.

<h1>text</h1><div>sample text<br><action-text-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSI3Z2lkOi8vZWxvb3AtcmljaC9BY3RpdmVTdG9yYWdlOjpCbG9iLzEzP2V4cGlyZXNfaW4GOwBUSSIMcHVycG9zZQY7AFRJIg9hdHRhY2hhYmxlBjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--36dd18a0ed30ace4bc8442849d9dd3355bc86443" content-type="image/png" url="http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--e887e47b082a537f647284bc0bfb6b6216f51216/deal.png" filename="deal.png" filesize="10394" width="256" height="256" presentation="gallery"></action-text-attachment></div>

I tried to display the content like this in vue.js file.

<div v-html=""></div>

Then, texts are properly displayed, but images are not displayed. How can I solve it?

• javascript
• html
• vue.js
• actiontext

Share Improve this question Follow edited Oct 11, 2019 at 15:08 Misaki Agata asked Oct 11, 2019 at 12:09 Misaki AgataMisaki Agata 2311 gold badge11 silver badge44 bronze badges 4

• <div v-html=""></div> displays nothing. – Abdelillah Aissani Commented Oct 11, 2019 at 12:15
• So are you just asking how to convert an <action-text-attachment> to an <img>? Is the url attribute pointing at the right place for that image? – skirtle Commented Oct 11, 2019 at 12:27
• @Dadboz I'm sorry for my bad writing, I just wanted to point that I used this directive. – Misaki Agata Commented Oct 11, 2019 at 12:51
• @skirtle That's true, I want to convert an <action-text-attachment> to an <img>. The url is correct. – Misaki Agata Commented Oct 11, 2019 at 12:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

I'm not familiar with the rich text format created by Action Text so I can't ment on whether using it in conjunction with v-html is safe.

One approach would be to manipulate the text prior to inserting it. If the Action Text format is very predictable then this wouldn't be difficult using a RegExp. Trying to parse HTML more generally is a bit tricky.

In the example below I've gone with a different approach. This inserts the text unchanged using v-html and then updates the DOM to insert <img> elements in place of <action-text-attachment> elements. It only sets the src attribute but you could set other attributes as you deem appropriate.

new Vue({
  el: '#app',
  
  data () {
    return {
      text: '<h1>text</h1><div>sample text<br><action-text-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSI3Z2lkOi8vZWxvb3AtcmljaC9BY3RpdmVTdG9yYWdlOjpCbG9iLzEzP2V4cGlyZXNfaW4GOwBUSSIMcHVycG9zZQY7AFRJIg9hdHRhY2hhYmxlBjsAVEkiD2V4cGlyZXNfYXQGOwBUMA==--36dd18a0ed30ace4bc8442849d9dd3355bc86443" content-type="image/png" url="https://vuejs/images/logo.png" filename="deal.png" filesize="10394" width="256" height="256" presentation="gallery"></action-text-attachment></div>'
    }
  },
  
  mounted () {
    this.updateImages()
  },
  
  updated () {
    this.updateImages()
  },
  
  methods: {
    updateImages () {
      const attachments = this.$el.querySelectorAll('action-text-attachment[content-type="image/png"]')
      
      for (const attachment of attachments) {
        const img = document.createElement('img')
        img.setAttribute('src', attachment.getAttribute('url'))
        attachment.parentNode.replaceChild(img, attachment)
      }
    }
  }
})

<script src="https://unpkg./[email protected]/dist/vue.js"></script>

<div id="app">
  <div v-html="text"></div>
</div>