voidlabs / mosaico

Mosaico - Responsive Email Template Editor
https://mosaico.io
GNU General Public License v3.0
1.7k stars 500 forks source link

Missing SRC in IMG in resulting HTML #514

Closed BertHardeman closed 4 years ago

BertHardeman commented 5 years ago

Can you help me as I'm having troubles with the editor? My goal is to embed your editor (as-is) in an MVC .NET web application (using the .NET backend). I use the example .NET backend and that is working as expected.

My problem is with the local installed demo version. Basically everything is working fine, but the resulting HTML misses the SRC argument in the IMG tag. I assume your demo version is ok, so it is probably environment related issue. I'm new at node and npm. I can't pinpoint where the problem is. Below are the steps I took in order to recreate the problem.

Download mosaico-master and Unzip it to a folder

I'm using the following environment: • Windows 8.1 Pro • npm versionb 6.9.0 • node version v10.15.3 • ImageMagick 7+ with legacy options

I ran the build and run commands. Below is the output:

C:\GitRepos\mosaico-master>npm install npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: "os":"win32","arch":"x64"})

added 734 packages from 642 contributors and audited 4616 packages in 40.458s found 11 vulnerabilities (3 low, 5 moderate, 3 high) run npm audit fix to fix them, or npm audit for details

C:\GitRepos\mosaico-master>npm install -g grunt-cli C:\Users\berthardeman\AppData\Roaming\npm\grunt -> C:\Users\berthardeman\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt+ grunt-cli@1.3.2 updated 2 packages in 4.357s

C:\GitRepos\mosaico-master>grunt Running "googlefonts:noto" (googlefonts) task

1 font downloaded.

Running "copy:res" (copy) task Created 6 directories, copied 41 files

Running "copy:root" (copy) task Copied 1 file

Running "copy:htmls" (copy) task Copied 2 files

Running "copy:fontawesome" (copy) task Copied 5 files

Running "uglify:deps" (uglify) task

1 sourcemap created. 1 file created 2.43 MB → 935.72 kB

Running "cssmin:deps" (cssmin) task

1 file created. 397 B → 359 B

Running "jshint:all" (jshint) task

V No problems

Running "combineKOTemplates:main" (combineKOTemplates) task

Running "browserify:main" (browserify) task

1082890 bytes written (8.66 seconds) Bundle build/mosaico.js created.

Running "exorcise:main" (exorcise) task Exorcising source map from build/mosaico.js

Running "less:css" (less) task

2 stylesheets created.

Running "postcss:dist" (postcss) task

1 processed stylesheet created. 1 sourcemap created.

Running "postcss:material" (postcss) task

1 processed stylesheet created. 1 sourcemap created.

Running "express:dev" (express) task Starting background Express server Express server listening on port 9006

Running "watch" task Waiting...

I started a browser with the link: 127.0.0.1:9006 Choose versafix-1 template Add ImageBlock Upload image

Below the console output: JQMIGRATE: Migrate is installed, version 3.0.1 jquery-migrate.min.js:33:8 translateTemplate: 1126ms undomain.js:3 generateModel: 11ms undomain.js:3 Ignoring longTextStyle.lineHeight property because it is not used by the template prop: lineHeight type: styler level: 2 preheaderBlock model.js:1 Ignoring longTextStyle.linksColor property because it is not used by the template prop: linksColor type: styler level: 2 preheaderBlock model.js:1 Ignoring longTextStyle.lineHeight property because it is not used by the template prop: lineHeight type: styler level: 2 footerBlock model.js:1 Ignoring longTextStyle.align property because it is not used by the template prop: align type: styler level: 2 footerBlock model.js:1 Ignoring externalTextStyle.align property because it is not used by the template prop: align type: styler level: 2 logoBlock model.js:1 Ignoring longTextStyle.lineHeight property because it is not used by the template prop: lineHeight type: styler level: 2 logoBlock model.js:1 Ignoring longTextStyle.align property because it is not used by the template prop: align type: styler level: 2 logoBlock model.js:1 Ignoring longTextStyle.linksColor property because it is not used by the template prop: linksColor type: styler level: 2 logoBlock model.js:1 Ignoring longTextStyle.lineHeight property because it is not used by the template prop: lineHeight type: styler level: 2 imageBlock model.js:1 Ignoring longTextStyle.align property because it is not used by the template prop: align type: styler level: 2 imageBlock model.js:1 Ignoring longTextStyle.lineHeight property because it is not used by the template prop: lineHeight type: styler level: 2 doubleImageBlock model.js:1 Ignoring longTextStyle.align property because it is not used by the template prop: align type: styler level: 2 doubleImageBlock model.js:1 Ignoring longTextStyle.lineHeight property because it is not used by the template prop: lineHeight type: styler level: 2 tripleImageBlock model.js:1 Ignoring longTextStyle.align property because it is not used by the template prop: align type: styler level: 2 tripleImageBlock model.js:1 Ignoring longText property because it is not used by the template prop: longText type: edit level: 1 bigSocialBlock model.js:1 Ignoring longTextStyle property because it is not used by the template prop: longTextStyle type: styler level: 1 bigSocialBlock model.js:1 Ignoring customUrl property because it is not used by the template prop: customUrl type: edit level: 1 shareBlock model.js:1 Ignoring shareButtonStyle.align property because it is not used by the template prop: align type: styler level: 2 shareBlock model.js:1 Ignoring longTextStyle.lineHeight property because it is not used by the template prop: lineHeight type: styler level: 2 socialBlock model.js:1 Ignoring longTextStyle.align property because it is not used by the template prop: align type: styler level: 2 socialBlock model.js:1 Ignoring frameTheme.longTextStyle.lineHeight property because it is not used by the template prop: lineHeight type: styler level: 2 theme model.js:1 Ignoring contentTheme.externalTextStyle.align property because it is not used by the template prop: align type: styler level: 2 theme model.js:1 Ignoring contentTheme.shareButtonStyle.align property because it is not used by the template prop: align type: styler level: 2 theme model.js:1 generateEditors: 91ms undomain.js:3 initializeViewmodel: 1ms undomain.js:3 unreachable code after return statement[Meer info] mosaico-libs-and-tinymce.min.js:3:121 unreachable code after return statement[Meer info] mosaico-libs-and-tinymce.min.js:3:121 unreachable code after return statement[Meer info] mosaico-libs-and-tinymce.min.js:3:121 unreachable code after return statement[Meer info] mosaico-libs-and-tinymce.min.js:3:121 unreachable code after return statement[Meer info] mosaico-libs-and-tinymce.min.js:3:123 unreachable code after return statement[Meer info] mosaico-libs-and-tinymce.min.js:3:123 applyBindings: 692ms undomain.js:3 ​ When I download the HTML there is no SRC argument on the image tag: MissingSrc

When I try this with the demo version running on you web a source argument is added to the image tag. ExampleWebSite

I've tested this in the latest version of Chrome and FireFox.

There are some install issues: The fsevents is an optinal dependency. I've tried to install this, but this made no difference. I also used the NPS AUDIT FIX, but that made also no difference.

Can you please help me find out how to solve this issue?

oojamoo-H commented 5 years ago

Hi BertHardeman, I have met the same problem, you can try the way below: In wysiwygs.js: image

BertHardeman commented 5 years ago

Many thanks. This solves the issue.

I leave this issue open so others can decide whether this needs to be changed in the original code.

bago commented 5 years ago

Please note I suggest using the last released version of mosaico. Current master have a few work in progress and some known issue. Don't use it in production or as a basis for your fork.