Show images in the table

[ericksongmr]

Hello again, I'm trying to show an image in one of the columns without success, I'm doing it this way:

{
                        name: 'Photo',
                        key: 'photo',
                        render(value) {
                            return `<img src="/storage/uploads/userProduct/18-02-20-10-33-35_photo.png" />`;
                        }
                    },

And try also as the documentation shows but it does not work either:

{
    ...,
    columns: [
        {
            name: 'Name',
            key: 'key',
            render (value, row) {
                return <strong>{value}</strong>
            }
        }
    ]
}

Would you be so kind to help me show the images on the table, how should I do it?

Regards,

[coderdiaz]

At the moment, vue-datasource cannot render html :( but if are you using JSX can you render it

render(value) {
   return <img src={imageUrl} />;
}

[ericksongmr]

Hi, and how can I implement JSX in my project? could you provide me with a link with information please, my project is working with laravel and vue

[coderdiaz]

@ericksongmr you need a plugin for babel https://github.com/vuejs/babel-plugin-transform-vue-jsx

[ericksongmr]

Hi, tell me to do this:

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-env\
  --save-dev

In your .babelrc:

{
  "presets": ["env"],
  "plugins": ["transform-vue-jsx"]
}

Already with that should work? Or do I have to do another type of configuration? Thanks for your time, I'm new to this and I do not know much about the subject.